
/* ============================================================================
   Telas novas do portal (Minhas romarias, Pagamentos, Perfil)
   26/10/2026
   ========================================================================== */

/* ---- busca ---- */
.sr-busca { display: flex; align-items: center; gap: 9px; padding: 0 13px;
  height: 44px; background: #fff; border: 1.5px solid #dbe6f3; border-radius: 11px; }
.sr-busca svg { color: #8496ad; flex: none; }
.sr-busca input { flex: 1; border: 0; outline: 0; font-size: 14px; color: var(--pr-ink);
  background: transparent; font-family: inherit; }
.sr-busca input::placeholder { color: #9aabc0; }

/* ---- filtros (abas de status) ---- */
.pr-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-filtro { display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px; height: 36px; border-radius: 9px;
  border: 1.5px solid #dbe6f3; background: #fff;
  font-size: 12.5px; font-weight: 800; color: #475569;
  cursor: pointer; font-family: inherit; transition: .15s; }
.pr-filtro:hover { border-color: #93aef0; color: #1e3a5f; }
.pr-filtro.on { background: var(--pr-navy); border-color: var(--pr-navy); color: #fff; }
.pr-filtro .n { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #eef3fa; color: #475569; font-size: 10.5px; }
.pr-filtro.on .n { background: rgba(255,255,255,.22); color: #fff; }

/* ---- linha clicavel ---- */
.sr-linha-click { cursor: pointer; border-radius: 9px; padding: 12px 10px;
  margin: 0 -10px; transition: background .13s; }
.sr-linha-click:hover { background: #f4f8fe; }

/* ---- perfil ---- */
.pr-perfil-linha { display: flex; align-items: center; gap: 15px; }
.pr-perfil-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.pr-perfil-grade > div { display: flex; flex-direction: column; gap: 3px; }
.pr-perfil-grade .rot { font-size: 10.5px; font-weight: 800; color: #8496ad;
  text-transform: uppercase; letter-spacing: .04em; }
.pr-perfil-grade b { font-size: 13.5px; color: var(--pr-navy); }
.pr-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pr-campo span { font-size: 11px; font-weight: 800; color: #475569; }
.pr-campo input { height: 42px; padding: 0 12px; border: 1.5px solid #dbe6f3;
  border-radius: 10px; font-size: 16px; font-family: inherit; outline: 0; min-width: 0; }
.pr-campo input:focus { border-color: #93aef0; box-shadow: 0 0 0 3px rgba(147,174,240,.18); }

/* ---- chips de status ---- */
.pr-chip.c-recusado { background: #fdeaea; color: #b42318; border-color: #f3c3c3; }
.pr-chip.c-cancelado { background: #f1f5f9; color: #64748b; border-color: #dbe6f3; }

/* ---- avisos do popup ---- */
.pn-aviso { font-size: 12.5px; padding: 9px 12px; border-radius: 9px;
  background: #eef4ff; color: #1e3a5f; margin-top: 12px; }
.pn-aviso-ok { background: #e7f8ec; color: #166534; }
.pn-aviso-erro { background: #fdeaea; color: #b42318; }

/* ---- chips de vaga por dia ---- */
.pn-dia-chip { display: inline-flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid #dbe6f3;
  background: #fff; min-width: 84px; }
.pn-dia-chip b { font-size: 12px; color: var(--pr-navy); }
.pn-dia-chip span { font-size: 10px; color: #8496ad; text-transform: uppercase; }
.pn-dia-chip .vaga { font-size: 10.5px; font-weight: 800; color: #8496ad; font-style: normal; }
.pn-dia-chip.ok { border-color: #86c99a; background: #f2fbf5; }
.pn-dia-chip.ok .vaga { color: #15803d; }
.pn-dia-chip.lotado { border-color: #eba0a0; background: #fef4f4; }
.pn-dia-chip.lotado .vaga { color: #b42318; }
.pn-dias-resumo { font-size: 12px; color: #64748b; margin-top: 10px; }
.pn-dias-resumo.bom { color: #15803d; font-weight: 700; }
.pn-dias-resumo.ruim { color: #b42318; font-weight: 700; }

/* ---- mobile ---- */
@media (max-width: 720px) {
  .pr-perfil-grade { grid-template-columns: minmax(0, 1fr); }
  .pr-campo input { font-size: 16px; }
  .sr-busca { height: 46px; }
}
