/* Player profiles, team links and the phone's Contacts (4 nov 2026, docs/diseno/perfil-jugador-C.html and telefono-contactos*.html) */

/* A tappable team or owner name, anywhere */
.pf-link { all: unset; cursor: pointer; color: inherit; border-bottom: 1px dotted currentColor; display: inline-flex; flex-direction: column; min-width: 0; max-width: 100%; }
.pf-link:hover, .pf-link:focus-visible { color: var(--flag); }
.pf-link small { font-size: 11px; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-row .nm .pf-link { border-bottom: 0; } .lg-row .nm .pf-link > span { border-bottom: 1px dotted var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-owner { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pf-owner .pf-link { display: inline; }
.ag-tbl td .pf-owner { font-size: 11px; }
.pf-open { cursor: pointer; }
.pf-open:hover, .pf-open:focus-visible { color: var(--flag); outline: none; }
.rp-tower li.tm { cursor: pointer; } .rp-tower li.tm:hover .n { text-decoration: underline dotted; }

/* The profile: left column (who), right (cards) */
.pf { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.pf-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.pf-side .label { margin: 4px 0 0; }
.pf-id { display: flex; gap: 14px; align-items: center; }
.pf-id .pf-crest { flex: none; display: grid; }
.pf-id > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-id h2 { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.05; text-transform: uppercase; color: var(--hi); overflow-wrap: anywhere; }
.pf-id small { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.pf-id .flag { width: 20px; height: 13px; }
.pf-dc { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--glass); }
.pf-dc .label { margin: 0; }
.pf-dc > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-dc b { font-family: var(--mono); font-size: 14px; color: var(--hi); overflow: hidden; text-overflow: ellipsis; } .pf-dc b.mut { color: var(--muted); font-family: var(--body); }
.pf-dc small { color: var(--muted); font-size: 12px; }
.pf-copy { padding: 4px 10px; font-size: 12px; }
.pf-edit { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.pf-edit summary { cursor: pointer; color: var(--flag); font-weight: 600; font-size: 14px; }
.pf-edit[open] { display: flex; flex-direction: column; gap: 8px; }
.pf-edit label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.pf-edit input, .pf-edit select { width: 100%; }
.pf-ok { color: var(--ok); font-size: 13px; }
.pf-tro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pf-tro div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border: 1px solid var(--line); border-top: 2px solid var(--tc); border-radius: 6px; background: var(--glass); }
.pf-tro i { font-style: normal; font-size: 15px; color: var(--tc); }
.pf-tro b { font-family: var(--display); font-size: 24px; color: var(--hi); line-height: 1; }
.pf-tro small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pf-since { color: var(--muted); font-size: 11.5px; margin-top: -6px; }
.pf-ents { display: flex; flex-direction: column; gap: 6px; }
.pf-ent { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.pf-ent > span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pf-ent b { font-size: 13.5px; } .pf-ent > span small { color: var(--muted); font-size: 12px; }
.pf-ent em { font-style: normal; font-family: var(--display); font-size: 20px; color: var(--hi); } .pf-ent em small { font-size: 12px; color: var(--muted); }
.pf-fav { width: 100%; padding: 10px; }
.pf-fav.on { border-color: var(--medium); color: var(--medium); }

.pf-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pf-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pf-chips button { padding: 6px 12px; font-size: 13px; white-space: nowrap; } .pf-chips button small { color: var(--muted); font-size: 11px; }
.pf-chips button[aria-pressed="true"] small { color: inherit; }
.pf-view, .sc-tabs { display: inline-flex; }
.pf-view button, .sc-tabs button { padding: 7px 12px; font-size: 13px; border-radius: 0; white-space: nowrap; }
.pf-view button + button, .sc-tabs button + button { border-left: 0; }
.pf-view button[aria-pressed="true"], .sc-tabs button[aria-pressed="true"], .pf-chips button[aria-pressed="true"] { background: var(--fg); color: var(--asphalt); border-color: var(--fg); }
.pf-tools select { width: auto; flex: none; }
.pf-count { color: var(--muted); font-size: 12px; }
/* List */
.pf-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pf-row { display: grid; grid-template-columns: 2.6fr 0.7fr 0.6fr 1.6fr 1.9fr; gap: 10px; align-items: center; padding: 8px 12px; cursor: pointer; }
.pf-row + .pf-row { border-top: 1px solid var(--line); }
.pf-row:not(.th):hover { background: var(--glass); }
.pf-row.th { cursor: default; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 8px 12px; background: var(--panel); }
.pf-nm { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pf-nm .flag { flex: none; width: 22px; height: 15px; }
.pf-nm > span { min-width: 0; display: flex; flex-direction: column; }
.pf-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hi); font-size: 14px; }
.pf-nm small { color: var(--muted); font-size: 12px; } .pf-nm small i { font-style: normal; }
.pf-age { color: var(--muted); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pf-tag { font-size: 11px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pf-tag.sale { color: var(--medium); border-color: color-mix(in srgb, var(--medium) 40%, transparent); }
.pf-tag.loan { color: var(--flag); border-color: color-mix(in srgb, var(--flag) 45%, transparent); }
.pf-acts { display: flex; gap: 6px; justify-content: flex-end; }
.pf-acts button { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
.pf-acts button:disabled { opacity: .4; cursor: not-allowed; }
/* Full cards */
.pf-cell { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.pf-cell .pf-tags { justify-content: center; }
.pf-big { cursor: pointer; display: grid; justify-items: center; }
.pf-cell .pf-acts { justify-content: center; }

@media (max-width: 860px) {
  .pf { grid-template-columns: 1fr; }
  .pf-side { position: static; }
}
@media (max-width: 600px) {
  .pf-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm ovr" "tags tags" "acts acts"; row-gap: 6px; }
  .pf-row.th { display: none; }
  .pf-row .pf-nm { grid-area: nm; } .pf-row .ag-o { grid-area: ovr; } .pf-row .pf-age { display: none; }
  .pf-row .pf-tags { grid-area: tags; } .pf-row .pf-acts { grid-area: acts; justify-content: stretch; } .pf-row .pf-acts button { flex: 1; }
  .pf-chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pf-tools select { flex: 1; }
}

/* Scouting › Teams */
.sc-tabs { align-self: flex-start; }
.sc-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.sc-team { display: flex; gap: 10px; align-items: center; padding: 8px 12px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); cursor: pointer; font: inherit; }
.sc-team:hover, .sc-team:focus-visible { border-color: var(--flag); }
.sc-team .pf-crest { flex: none; display: grid; }
.sc-team > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-team b { color: var(--hi); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-team small { color: var(--muted); font-size: 12px; text-transform: none; letter-spacing: 0; display: inline-flex; gap: 5px; align-items: center; } .sc-team small .flag { width: 18px; height: 12px; }
.sc-team em { font-style: normal; font-size: 12px; color: var(--muted); }
.sc-team .fav { font-style: normal; color: var(--medium); }

/* Phone: the bottom tabs (Messages / Contacts) */
.ph-tabbar { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #1c1c1e; padding: 6px 0 22px; background: #0b0b0d; }
.ph-tabbar button { all: unset; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #8e8e93; font-size: 11px; font-weight: 600; }
.ph-tabbar button[aria-pressed="true"] { color: #0a84ff; }
.ph-tabbar i { position: absolute; top: -2px; left: 56%; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 800; font-style: normal; display: grid; place-items: center; }
.ph-dev.open .ph-tabbar { padding-bottom: 10px; }
/* Contacts list */
.ct-search { display: flex; gap: 8px; align-items: center; padding: 6px 16px 4px; flex: none; }
.ct-search label { flex: 1; display: flex; align-items: center; gap: 8px; background: #1c1c1e; border-radius: 10px; padding: 0 10px; height: 38px; }
.ct-search input { all: unset; flex: 1; min-width: 0; color: #fff; font-size: 16px; }
.ct-search input::placeholder { color: #8e8e93; }
.ct-cancel { all: unset; cursor: pointer; color: #0a84ff; font-size: 16px; }
.ct-sec { padding: 14px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #8e8e93; text-transform: uppercase; }
.ct-row { align-items: center; }
.ct-row .ph-av { font-size: 16px; }
.ct-star { all: unset; cursor: pointer; flex: none; padding: 6px 12px; border-radius: 16px; background: #1c1c1e; color: #0a84ff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ct-star.on { background: none; color: #ffd60a; font-size: 22px; padding: 0 6px; }
.ph-row.on .ct-star { background: rgba(255, 255, 255, .18); color: #fff; } .ph-row.on .ct-star.on { background: none; color: #ffd60a; }
/* Contact detail */
.ct-detail { gap: 12px; }
.ct-top { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding-top: 6px; }
.ct-top .ph-av.big { width: 72px; height: 72px; font-size: 26px; }
.ct-top h4 { margin: 6px 0 0 !important; }
.ct-top small { color: #8e8e93; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; } .ct-top .flag { width: 18px; height: 12px; }
.ct-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ct-btns .ph-btn { text-align: center; padding: 10px 6px; font-size: 14px; }
.ct-box { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #1c1c1e; border-radius: 12px; padding: 12px 14px; }
.ct-box span { color: #8e8e93; font-size: 14px; } .ct-box b { font-size: 15px; } .ct-box b.mut { color: #8e8e93; font-weight: 600; }
.ct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ct-stats div { background: #1c1c1e; border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ct-stats b { font-size: 20px; font-weight: 800; } .ct-stats small { color: #8e8e93; font-size: 12px; }
.ct-detail .ct-sec { padding: 6px 0 0; }
.ct-hist { display: flex; flex-direction: column; background: #1c1c1e; border-radius: 12px; }
.ct-hist div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; font-size: 14.5px; }
.ct-hist div + div { border-top: 1px solid #2c2c2e; }
.ct-hist small { color: #8e8e93; font-size: 12px; } .ct-hist .open small { color: #ff9f0a; font-weight: 700; }
.ph-mhead .pf-link { font-size: 17px; }