/* ==========================================================================
   BMC 2.0 — Formulários da equipe + listas de atletas / comissão
   Escopo: body[class*="pe-page-"]; carregado por HeadPE.php
   ========================================================================== */

/* ---------- Formulários: Criar / Editar equipe ---------- */
html body.pe-page-criar-equipe form,
html body.pe-page-editar-equipe form{ max-width: 1080px; margin: 0 auto; padding: 26px 32px 60px; }
html body.pe-page-criar-equipe .pe-form-section,
html body.pe-page-editar-equipe .pe-form-section{
  background:#fff !important; border:1px solid var(--hair) !important; border-radius: var(--r) !important; box-shadow: var(--sh-1) !important;
  padding: 26px 28px 22px !important; margin: 0 0 20px !important;
}
html body[class*="pe-page-"] .pe-section-title{
  display:flex; align-items:center; gap:12px; margin: 0 0 18px !important; padding:0 !important; border:0 !important;
  font-family: var(--f-display) !important; font-weight:800 !important; font-size:1.5rem !important; letter-spacing:.05em; text-transform:uppercase; color: var(--ink) !important;
}
html body[class*="pe-page-"] .pe-section-title::before{ content:''; width:6px; height:26px; border-radius:4px; background: linear-gradient(180deg, var(--c1), var(--c2)); flex:0 0 auto; }
html body[class*="pe-page-"] .pe-form-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px 20px; }
html body[class*="pe-page-"] .pe-col-6{ grid-column: span 6; } html body[class*="pe-page-"] .pe-col-4{ grid-column: span 4; } html body[class*="pe-page-"] .pe-col-8{ grid-column: span 8; }
html body[class*="pe-page-"] .pe-field-group{ min-width:0; margin:0 !important; }
html body[class*="pe-page-"] .pe-field-group > label,
html body[class*="pe-page-"] .pe-form-section label{
  display:block; margin: 0 0 6px !important; font-size:.72rem !important; font-weight:700 !important; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-2) !important; position:static; transform:none;
}
html body[class*="pe-page-"] .pe-form-section input[type=text],
html body[class*="pe-page-"] .pe-form-section input[type=email],
html body[class*="pe-page-"] .pe-form-section input[type=tel],
html body[class*="pe-page-"] .pe-form-section input[type=number],
html body[class*="pe-page-"] .pe-form-section select,
html body[class*="pe-page-"] .pe-form-section textarea{
  box-sizing:border-box; width:100%; height:52px; padding: 0 16px; margin:0; background:#fff !important; color: var(--ink) !important;
  border:1.5px solid var(--hair) !important; border-radius: var(--r-sm) !important; font-family: var(--f-body); font-size:.98rem; box-shadow:none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body[class*="pe-page-"] .pe-form-section select.browser-default{ display:block; appearance:auto; }
html body[class*="pe-page-"] .pe-form-section input:focus,
html body[class*="pe-page-"] .pe-form-section select:focus{ border-color: var(--c1) !important; box-shadow: 0 0 0 4px rgba(var(--c1-rgb), .12) !important; outline:0; }
html body[class*="pe-page-"] .pe-field-hint{ margin: 6px 0 0 !important; font-size:.78rem; color: var(--mute) !important; line-height:1.4; }
html body[class*="pe-page-"] .pe-ig-prefix{ display:inline-flex; align-items:center; height:52px; padding:0 14px; margin-right:-1px; background: var(--paper); border:1.5px solid var(--hair); border-right:0; border-radius: var(--r-sm) 0 0 var(--r-sm); color: var(--mute); font-weight:600; font-size:.9rem; }
html body[class*="pe-page-"] .pe-ig-input{ border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
html body[class*="pe-page-"] .pe-color-row{ display:flex; flex-wrap:wrap; gap:14px; padding: 14px; background: var(--paper); border:1px solid var(--hair); border-radius: var(--r); }
html body[class*="pe-page-"] .pe-color-picker-item{ display:flex; align-items:center; gap:12px; padding: 8px 16px; background:#fff; border:1px solid var(--hair); border-radius:999px; font-weight:700; font-size:.84rem; color: var(--ink-2); }
html body[class*="pe-page-"] .color-picker-button{ width:40px !important; height:40px !important; border-radius:50% !important; border:3px solid #fff !important; box-shadow: 0 0 0 1px var(--hair), var(--sh-1) !important; cursor:pointer; }
html body[class*="pe-page-"] .pe-categories-intro{ color: var(--ink-2) !important; font-weight:500; margin: 0 0 14px !important; }
html body[class*="pe-page-"] .pe-categories-wrapper{ display:flex; flex-wrap:wrap; gap:10px; }
html body[class*="pe-page-"] .pe-category-option{ cursor:pointer; }
html body[class*="pe-page-"] .pe-category-option input{ position:absolute; opacity:0; pointer-events:none; }
html body[class*="pe-page-"] .pe-category-option span,
html body[class*="pe-page-"] .pe-category-option label{
  display:inline-flex; align-items:center; padding: 11px 20px !important; margin:0 !important; border-radius:999px !important;
  background:#fff !important; color: var(--ink-2) !important; border:1.5px solid var(--hair) !important; font-weight:700 !important; font-size:.8rem !important; letter-spacing:.05em; text-transform:uppercase; transition: all .16s ease; box-shadow:none !important;
}
html body[class*="pe-page-"] .pe-category-option:hover span,
html body[class*="pe-page-"] .pe-category-option:hover label{ border-color: var(--c1) !important; color: var(--c1) !important; }
html body[class*="pe-page-"] .pe-category-option input:checked + span,
html body[class*="pe-page-"] .pe-category-option input:checked + label{ background: var(--c1) !important; color:#fff !important; border-color: var(--c1) !important; box-shadow: 0 6px 16px rgba(var(--c1-rgb), .3) !important; }
html body[class*="pe-page-"] .pe-categories-wrapper--locked{ opacity:.7; }
html body[class*="pe-page-"] .pe-categories-lock-msg{ padding: 12px 16px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 10%, #fff); color: #92400e !important; font-weight:600; }
html body[class*="pe-page-"] .pe-brasao-note{ color: var(--mute) !important; font-size:.84rem; }
html body[class*="pe-page-"] .pe-btn-file,
html body[class*="pe-page-"] .btn.pe-btn-file{
  display:inline-flex !important; align-items:center; gap:8px; height:auto !important; line-height:1 !important; padding: 13px 22px !important; border-radius:999px !important;
  background: var(--ink) !important; color:#fff !important; font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; box-shadow:none !important; cursor:pointer;
}
html body[class*="pe-page-"] .pe-btn-file:hover{ background: var(--c1) !important; }
html body[class*="pe-page-"] .pe-file-path{ height:48px !important; }
html body[class*="pe-page-"] .pe-crop-panel,
html body[class*="pe-page-"] .pe-brasao-crop-wrap{ background: var(--paper); border:1px dashed var(--hair); border-radius: var(--r); padding:16px; }
html body[class*="pe-page-"] .pe-terms-group{ padding: 18px 20px; background: var(--c1-t); border:1px solid var(--c1-t2); border-radius: var(--r); }
html body[class*="pe-page-"] .btn-submit,
html body[class*="pe-page-"] .pe-btn-submit,
html body[class*="pe-page-"] button.btn-submit{
  display:inline-flex !important; align-items:center; justify-content:center; width:100%; max-width:420px; height:auto !important; line-height:1 !important; margin-top:8px;
  padding: 17px 28px !important; border:0 !important; border-radius:999px !important; cursor:pointer; color:#fff !important;
  background: linear-gradient(135deg, var(--c1), var(--c1-d)) !important; box-shadow: 0 12px 26px rgba(var(--c1-rgb), .32) !important;
  font-family: var(--f-body); font-weight:800; font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; transition: transform .18s ease, box-shadow .18s ease;
}
html body[class*="pe-page-"] .btn-submit:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px rgba(var(--c1-rgb), .42) !important; }
html body[class*="pe-page-"] .pe-btn-submit--ghost{ background:#fff !important; color: var(--ink-2) !important; border:1.5px solid var(--hair) !important; box-shadow:none !important; }
@media (max-width: 760px){
  html body.pe-page-criar-equipe form, html body.pe-page-editar-equipe form{ padding: 16px 14px 44px; }
  html body[class*="pe-page-"] .pe-col-6, html body[class*="pe-page-"] .pe-col-4, html body[class*="pe-page-"] .pe-col-8{ grid-column: span 12; }
  html body[class*="pe-page-"] .btn-submit{ max-width:none; }
}

/* ---------- Atletas / Comissão ---------- */
html body.pe-page-atleta .CAtoolbar,
html body.pe-page-comissao .CAtoolbar{ margin: 22px 32px 0 !important; padding: 18px 22px !important; background:#fff !important; border:1px solid var(--hair) !important; border-radius: var(--r) !important; box-shadow: var(--sh-1) !important; }
html body[class*="pe-page-"] .CAtoolbar .left-info{ display:flex; align-items:center; gap:14px; }
html body[class*="pe-page-"] .CAtoolbar .left-info i{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background: var(--c1-t) !important; color: var(--c1) !important; font-size:22px; }
html body[class*="pe-page-"] .CAtoolbar .title{ margin:0 !important; font-family: var(--f-display) !important; font-weight:800 !important; font-size:1.45rem !important; letter-spacing:.04em; text-transform:uppercase; color: var(--ink) !important; }
html body[class*="pe-page-"] .CAtoolbar .subtitle{ margin:2px 0 0 !important; font-size:.84rem; font-weight:600; color: var(--mute) !important; }
.pe-toolbar-mobile{ padding: 14px 18px 4px 70px; }
.pe-toolbar-mobile h5{ text-align:left !important; margin:0 !important; font-size:1.4rem; text-transform:uppercase; }
.pe-toolbar-mobile__team{ margin:2px 0 0; font-weight:700; font-size:.88rem; } .pe-toolbar-mobile__cat{ margin:0; color: var(--mute); font-size:.8rem; }
html body[class*="pe-page-"] .pe-limite-atletas-msg{ margin: 16px 32px 0 !important; background: color-mix(in srgb, var(--warn) 10%, #fff) !important; color:#92400e; border:1px solid color-mix(in srgb, var(--warn) 30%, #fff); }
html body[class*="pe-page-"] .CAadd{ padding: 18px 32px 6px; }
html body[class*="pe-page-"] .CAadd a{
  display:inline-flex !important; align-items:center; gap:12px; padding: 9px 22px 9px 9px; border-radius:999px; background: linear-gradient(135deg, var(--c1), var(--c1-d));
  color:#fff !important; box-shadow: 0 10px 24px rgba(var(--c1-rgb), .3); transition: transform .18s ease, box-shadow .18s ease;
}
html body[class*="pe-page-"] .CAadd a:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(var(--c1-rgb), .4); }
html body[class*="pe-page-"] .CAadd a i{ width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff !important; margin:0 !important; }
html body[class*="pe-page-"] .CAadd a p{ margin:0 !important; font-weight:800; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#fff !important; }

html body[class*="pe-page-"] .atletas-grid,
html body[class*="pe-page-"] .comissao-grid{
  display:grid !important; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 18px; padding: 18px 32px 56px !important; margin:0 !important; width:auto !important; box-sizing:border-box;
}
html body[class*="pe-page-"] .atleta-card,
html body[class*="pe-page-"] .comissao-card{
  display:flex; flex-direction:column; width:auto !important; margin:0 !important; background:#fff !important; border:1px solid var(--hair) !important; border-radius: var(--r) !important;
  box-shadow: var(--sh-1) !important; overflow:hidden; transition: transform .22s ease, box-shadow .22s ease;
}
html body[class*="pe-page-"] .atleta-card:hover,
html body[class*="pe-page-"] .comissao-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-3) !important; }
html body[class*="pe-page-"] .atleta-photo,
html body[class*="pe-page-"] .comissao-photo{ position:relative; aspect-ratio: 4 / 4.2; background: var(--paper); overflow:hidden; }
html body[class*="pe-page-"] .atleta-photo img,
html body[class*="pe-page-"] .comissao-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
html body[class*="pe-page-"] .atleta-body,
html body[class*="pe-page-"] .comissao-body{ padding: 14px 16px 12px !important; flex:1; }
html body[class*="pe-page-"] .atleta-name,
html body[class*="pe-page-"] .comissao-name{ margin: 0 0 10px !important; font-family: var(--f-display) !important; font-weight:700 !important; font-size:1.2rem !important; letter-spacing:.02em; line-height:1.1; text-transform:uppercase; color: var(--ink) !important; }
html body[class*="pe-page-"] .meta-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding: 7px 0 !important; margin:0 !important; background:transparent !important; border:0 !important; border-top:1px solid var(--hair-2) !important; border-radius:0 !important; }
html body[class*="pe-page-"] .meta-row span{ font-size:.66rem !important; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--mute) !important; }
html body[class*="pe-page-"] .meta-row b{ font-size:.84rem; font-weight:700; color: var(--ink) !important; }
html body[class*="pe-page-"] .atleta-actions,
html body[class*="pe-page-"] .comissao-actions{ display:flex; justify-content:center; gap:8px; padding: 12px 12px 14px !important; background: var(--paper) !important; border-top:1px solid var(--hair-2); }
html body[class*="pe-page-"] .icon-action{ width:38px !important; height:38px !important; border-radius:50% !important; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--hair) !important; background:#fff !important; transition: all .16s ease; padding:0 !important; }
html body[class*="pe-page-"] .icon-action:hover{ transform: translateY(-2px); box-shadow: var(--sh-2); }
html body[class*="pe-page-"] .icon-action i{ font-size:19px !important; }
@media (max-width: 860px){
  html body[class*="pe-page-"] .CAtoolbar{ margin: 14px 16px 0 !important; }
  html body[class*="pe-page-"] .CAadd{ padding: 14px 16px 4px; }
  html body[class*="pe-page-"] .atletas-grid, html body[class*="pe-page-"] .comissao-grid{ padding: 14px 16px 40px !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
}

/* ---------- Modais (inserir / editar / excluir) ---------- */
html body[class*="pe-page-"] .modal{ width: min(92vw, 760px) !important; max-height: 92% !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-3) !important; background:#fff; padding:0; overflow:hidden; display:none; flex-direction:column; }
html body[class*="pe-page-"] .modal.open{ display:flex; }
html body[class*="pe-page-"] .modal .modal-content{ padding: 28px 32px 8px !important; overflow-y:auto; flex:1; }
html body[class*="pe-page-"] .modal-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 20px; padding-bottom:14px; border-bottom:1px solid var(--hair); }
html body[class*="pe-page-"] .modal-title h4{ margin:0 !important; font-family: var(--f-display) !important; font-weight:800 !important; font-size:1.9rem !important; text-transform:uppercase; letter-spacing:.03em; color: var(--ink) !important; }
html body[class*="pe-page-"] .modal .tag{ display:inline-flex; align-items:center; gap:6px; padding: 6px 12px; border-radius:999px; background: var(--c1-t); color: var(--c1) !important; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
html body[class*="pe-page-"] .modal .tag i{ font-size:16px; }
html body[class*="pe-page-"] .modal .tag--danger{ background: color-mix(in srgb, var(--bad) 10%, #fff); color: var(--bad) !important; }
html body[class*="pe-page-"] .modal-section h5{ font-family: var(--f-display); font-size:1.2rem; text-transform:uppercase; letter-spacing:.05em; }
html body[class*="pe-page-"] .modal-footer{ padding: 12px 20px 18px !important; background:#fff !important; border-top:1px solid var(--hair-2); height:auto !important; }
html body[class*="pe-page-"] .modal-footer .btn-flat{ color: var(--mute) !important; font-weight:700; border-radius:999px; }
html body[class*="pe-page-"] .modal .input-field input,
html body[class*="pe-page-"] .modal .input-field input[type=text],
html body[class*="pe-page-"] .modal .input-field input[type=date],
html body[class*="pe-page-"] .modal .input-field input[type=email],
html body[class*="pe-page-"] .modal .input-field input[type=tel]{ border-bottom:1.5px solid var(--hair) !important; }
html body[class*="pe-page-"] .modal .input-field > label{ position:absolute; left:16px; top:-2px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--mute); transform: translateY(-20px) scale(1); pointer-events:none; }
html body[class*="pe-page-"] .modal .input-field{ margin-top: 26px; }
html body[class*="pe-page-"] .pe-modal-danger__name{ font-weight:800; color: var(--ink); }

/* ajustes finos */
html body[class*="pe-page-"] .pe-section-title{ margin-top: 30px !important; }
html body[class*="pe-page-"] form > .pe-section-title:first-child,
html body[class*="pe-page-"] .pe-section-title--flush{ margin-top:0 !important; }
html body[class*="pe-page-"] .pe-form-section select,
html body[class*="pe-page-"] select.browser-default{ border-radius: var(--r-sm) !important; }
html body[class*="pe-page-"] .pe-btn-file,
html body[class*="pe-page-"] .pe-btn-file *,
html body[class*="pe-page-"] .btn.pe-btn-file{ color:#fff !important; }
html body[class*="pe-page-"] .CAtoolbar{ width:auto !important; box-sizing:border-box; max-width: calc(100% - 64px); }
html body[class*="pe-page-"] #cropImageInsert, html body[class*="pe-page-"] [id^="cropImage"]{ width:auto; max-width:none; }
html body[class*="pe-page-"] select.browser-default,
html body[class*="pe-page-"] .pe-field-group select{
  height:52px; padding: 0 14px; background:#fff !important; border:1.5px solid var(--hair) !important; border-radius: var(--r-sm) !important; font-family: var(--f-body); font-size:.98rem; color: var(--ink);
}

/* ---------- Recorte do brasão: zoom out / encaixe ---------- */
.brasao-ajuste{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 18px; margin: 12px auto 4px; max-width: 560px; padding: 12px 14px; background: var(--paper); border:1px solid var(--hair); border-radius: var(--r); }
.brasao-ajuste__modos{ display:inline-flex; border:1.5px solid var(--hair); border-radius:999px; overflow:hidden; background:#fff; }
.brasao-ajuste__btn{ border:0; background:transparent; padding: 9px 16px; font:700 .74rem/1 var(--f-body); letter-spacing:.05em; text-transform:uppercase; color: var(--ink-2); cursor:pointer; transition: all .15s ease; }
.brasao-ajuste__btn.is-on{ background: var(--c1); color:#fff; }
.brasao-ajuste__zoom{ display:inline-flex; align-items:center; gap:8px; }
.brasao-ajuste__mini{ width:32px; height:32px; border-radius:50%; border:1.5px solid var(--hair); background:#fff; font-size:1.1rem; line-height:1; cursor:pointer; color: var(--ink); }
.brasao-ajuste__mini:hover{ border-color: var(--c1); color: var(--c1); }
.brasao-ajuste__rotulo{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-2); margin:0 !important; }
.brasao-ajuste__range{ width: 140px; margin:0; accent-color: var(--c1); }
.brasao-ajuste__val{ min-width: 2.6em; font-variant-numeric: tabular-nums; color: var(--c1); }
.brasao-ajuste__fundo{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; margin:0 !important; text-transform:none !important; letter-spacing:0 !important; }
.brasao-ajuste__fundo input{ position:static !important; opacity:1 !important; pointer-events:auto !important; }
@media (max-width: 760px){ #brasao-crop-wrap{ max-width: 100% !important; } }

/* Brasão por categoria (CriarEquipe / EditarEquipe) */
html body[class*="pe-page-"] .pe-brasao-pergunta{ margin: 14px 0 8px; font-size:1rem; color: var(--ink); }
html body[class*="pe-page-"] .pe-brasao-modo{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
html body[class*="pe-page-"] .pe-brasao-modo__op{ position:relative; cursor:pointer; margin:0; }
html body[class*="pe-page-"] .pe-brasao-modo__op input{ position:absolute; opacity:0 !important; pointer-events:none; }
html body[class*="pe-page-"] .pe-brasao-modo__op span{ display:inline-flex; align-items:center; padding: 12px 20px; border-radius:999px; border:1.5px solid var(--hair); background:#fff; color: var(--ink-2); font-weight:700; font-size:.9rem; transition: all .15s ease; padding-left:20px !important; height:auto !important; line-height:1.2 !important; }
html body[class*="pe-page-"] .pe-brasao-modo__op span::before, html body[class*="pe-page-"] .pe-brasao-modo__op span::after{ display:none !important; }
html body[class*="pe-page-"] .pe-brasao-modo__op:hover span{ border-color: var(--c1); }
html body[class*="pe-page-"] .pe-brasao-modo__op input:checked + span{ background: var(--c1); border-color: var(--c1); color:#fff; box-shadow: 0 6px 16px rgba(var(--c1-rgb), .3); }
html body[class*="pe-page-"] .brasao-cat{ margin: 0 0 18px; padding: 16px 18px; border:1px solid var(--hair); border-radius: var(--r); background:#fff; }
html body[class*="pe-page-"] .brasao-cat__titulo{ margin: 0 0 10px; font-family: var(--f-display); font-weight:800; font-size:1.15rem; letter-spacing:.05em; text-transform:uppercase; color: var(--c1); }
html body[class*="pe-page-"] .pe-brasao-atual{ display:flex; align-items:center; gap:12px; margin: 4px 0 10px; font-size:.82rem; color: var(--mute); }
html body[class*="pe-page-"] .pe-brasao-atual img{ width:64px; height:64px; object-fit:contain; border:1px solid var(--hair); border-radius:14px; background:#fff; padding:4px; }
html body[class*="pe-page-"] .bu-cropwrap{ max-width:50%; margin:0 auto; }
@media (max-width: 760px){ html body[class*="pe-page-"] .bu-cropwrap{ max-width:100% !important; } }

/* Títulos dos campos nos modais (Inscrever atleta/comissão): cinza escuro legível (antes ficava quase branco) */
html body[class*="pe-page-"] .modal .input-field > label,
html body[class*="pe-page-"] .modal .input-field > label.active,
html body[class*="pe-page-"] .modal .input-field > label.active:not(.label-icon),
html body[class*="pe-page-"] .modal form .row > .input-field > label{ color: var(--ink-2, #3a4150) !important; opacity:1 !important; }