/* A-LAB · Panel de control (premium, tamaño compacto) */
.pn { display: flex; flex-direction: column; gap: 14px; }
.pn .card { border-radius: 16px; box-shadow: 0 1px 0 rgba(17, 28, 22, 0.03), 0 10px 26px rgba(17, 28, 22, 0.05); }
.pn .card__head { padding: 12px 16px; }
.pn .card__title { font-size: 1.05rem; }
.pn .card__sub { font-size: var(--fs-xs); }
.pn-empty { padding: 20px 16px; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; }
.pn-loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 40px 16px; color: var(--ink-3); font-size: var(--fs-sm); }
.pn-more { font-size: var(--fs-xs); font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
.pn-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.pn-crest { width: 22px; height: 22px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 3px rgba(17, 28, 22, 0.16)); }
.pn-crest--sm { width: 14px; height: 14px; } .pn-crest--lg { width: 34px; height: 34px; }
.pn-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 99px; background: var(--brand-tint); color: var(--brand-ink); font: 600 11px/1 var(--font-ui); }
.pn-chip--avg { background: var(--surface-2); color: var(--ink-2); }
.pn-chip[hidden] { display: none; }
/* FEC-02: lápiz del nombre en el selector del once (solo administrador). Mismo aspecto que .fch-lapiz (alab-fechas.css); clase propia
   para que no lo tome el editor general de fechas. */
.xi-lapiz { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: -2px; padding: 0; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink-3); cursor: pointer; flex: none; align-self: flex-end; margin-bottom: 4px; touch-action: manipulation; }
.xi-lapiz svg { width: 15px; height: 15px; }
.xi-lapiz.is-on { color: var(--brand); }
.xi-lapiz:hover { background: var(--surface-2); color: var(--brand); }
.xi-lapiz:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.xi-lapiz[hidden] { display: none; }
.xi-pop__n { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.pn-badge { padding: 3px 9px; border-radius: 99px; font: 600 10.5px/1.2 var(--font-ui); font-style: normal; white-space: nowrap; }
.pn-badge--ok { background: var(--ok-bg); color: var(--ok); } .pn-badge--n { background: var(--surface-2); color: var(--ink-2); }

/* Saludo */
.pn-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; padding: 16px 20px; border-radius: 18px; background: radial-gradient(520px 200px at 100% 0%, var(--brand-tint-2), transparent 70%), linear-gradient(135deg, #EAF3EE, #FFFFFF 62%); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(17, 28, 22, 0.06); }
.pn-hero__title { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.1; margin: 2px 0 4px; }
.pn-hero__sub { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.pn-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-q { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 99px; background: #fff; border: 1px solid var(--line-strong); color: var(--ink); font: 500 var(--fs-sm)/1 var(--font-ui); text-decoration: none; box-shadow: 0 4px 12px rgba(17, 28, 22, 0.05); transition: all .15s var(--ease); }
.pn-q .icon { width: 16px; height: 16px; color: var(--brand); }
.pn-q:hover { border-color: var(--brand); color: var(--brand-ink); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(27, 103, 70, 0.14); }

/* Mejores de la fecha */
.pn-xi { overflow: hidden; }
.pn-xi__head { align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.pn-xi__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-sel .select { min-width: 112px; }
.xi-wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px; padding: 4px 16px 16px; align-items: stretch; }
.xi-pitch { position: relative; min-height: 580px; border-radius: 16px; background: repeating-linear-gradient(180deg, #2D7A56 0 12.5%, #2A7351 12.5% 25%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 14px 30px rgba(27, 103, 70, 0.26); overflow: hidden; }
.xi-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.xi-lines * { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Centrado con `translate` (no con `transform`): alabRise anima `transform` y, con fill "both", lo dejaba en none y corría a cada jugador medio ancho a la derecha y medio alto hacia abajo. */
.xi-p { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; text-decoration: none; transition: transform .18s var(--ease); z-index: 2; animation: alabRise .5s var(--ease) backwards; }
.xi-p:hover { transform: translateY(-4px) scale(1.07); z-index: 4; }
.xi-ph { position: relative; display: block; width: 46px; height: 46px; }
.xi-img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top; background: #fff; border: 3px solid #fff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); }
.xi-sc { position: absolute; right: -9px; bottom: -4px; min-width: 24px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: #fff; color: var(--ink); font: 700 11px/1 var(--font-data); font-style: normal; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
/* UI-05: el color de la insignia sale del tramo (en línea, desde ALAB_LIGA_METRICAS.pintar); antes dorado/verde con cortes propios en 85 y 75. */
.xi-crown { position: absolute; top: -17px; z-index: 3; font-size: 16px; color: #F2C230; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.xi-p b { max-width: 100%; padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.96); color: var(--ink); font-size: 10.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.xi-p small { max-width: 100%; font-size: 9px; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xi-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.xi-mvp { display: block; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #FBF0CF, #FFFFFF 70%); border: 1px solid #F0DCA0; text-decoration: none; color: inherit; box-shadow: 0 8px 20px rgba(201, 146, 26, 0.16); transition: transform .15s var(--ease); }
.xi-mvp:hover { transform: translateY(-2px); }
.xi-mvp__t { font: 600 10.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #7A5300; }
.xi-mvp__b { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.xi-mvp__img { width: 52px; height: 64px; border-radius: 10px; object-fit: cover; object-position: top; background: var(--surface-3); box-shadow: 0 6px 14px rgba(17, 28, 22, 0.2); flex: none; }
.xi-mvp__b > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xi-mvp__b b { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.15; }
.xi-mvp__b span { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--ink-2); }
.xi-mvp__b small { font-size: 10.5px; color: var(--ink-3); }
.xi-mvp__b strong { font: 700 2rem/1 var(--font-data); letter-spacing: -0.04em; color: #8A5A0E; }
.xi-h { margin: 4px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.xi-top { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.xi-top a { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, 0.9fr) 70px 28px; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 9px; text-decoration: none; color: inherit; font-size: var(--fs-xs); transition: background-color .12s; }
.xi-top a:hover { background: var(--surface-2); }
.xi-top i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); font: 600 10px/1 var(--font-data); font-style: normal; }
.xi-top li:first-child i { background: #E7B84B; color: #3D2B00; }
.xi-top b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xi-top span { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xi-top strong { font: 700 var(--fs-sm)/1 var(--font-data); text-align: right; }
.xi-bar { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .xi-bar u { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8FBFA5, #1B6746); text-decoration: none; }
.xi-note { margin: 2px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--ink-3); }
.xi-building { display: flex; align-items: center; gap: 18px; padding: 34px 24px; justify-content: center; flex-wrap: wrap; }
.xi-building h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.xi-building p { margin: 0; max-width: 52ch; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.xi-ring { flex: none; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; position: relative; background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--surface-3) 0); box-shadow: 0 8px 18px rgba(27, 103, 70, 0.22); }
.xi-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.xi-ring b { position: relative; font: 600 1.25rem/1 var(--font-data); } .xi-ring i { font-style: normal; font-size: .7rem; }

/* Mesa de trabajo */
.pn-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pn-recent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px 14px 14px; }
.pn-recent .pn-empty { grid-column: 1 / -1; }
.pn-rc { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); text-decoration: none; color: inherit; min-width: 0; transition: all .15s var(--ease); }
.pn-rc:hover { background: var(--brand-tint); transform: translateY(-2px); }
.pn-rc__img { width: 34px; height: 42px; border-radius: 8px; object-fit: cover; object-position: top; flex: none; background: var(--surface-3); }
.pn-rc__crest { width: 34px; height: 34px; object-fit: contain; flex: none; }
.pn-rc__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-tint); color: var(--brand); flex: none; } .pn-rc__ico .icon { width: 17px; height: 17px; }
.pn-rc div { min-width: 0; display: flex; flex-direction: column; } .pn-rc b { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-rc span { font-size: 10.5px; color: var(--ink-3); }
.pn-list { display: flex; flex-direction: column; padding: 2px 8px 10px; }
.pn-sl, .pn-ws { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 11px; text-decoration: none; color: inherit; transition: background-color .12s; }
.pn-sl:hover, .pn-ws:hover { background: var(--surface-2); }
.pn-sl__img { width: 32px; height: 40px; border-radius: 8px; object-fit: cover; object-position: top; flex: none; background: var(--surface-3); }
.pn-sl div, .pn-ws div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pn-sl b, .pn-ws b { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-sl span, .pn-ws span { font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-ws > i { width: 10px; height: 34px; border-radius: 99px; flex: none; }

/* Liga */
.pn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pn-grid--bottom { align-items: stretch; }
.pn-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pn-table { padding: 0 8px 8px; }
.pn-t { display: grid; grid-template-columns: 26px minmax(0, 1fr) 30px 38px 36px 92px; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; font: 500 var(--fs-sm)/1.2 var(--font-data); color: var(--ink-2); text-decoration: none; transition: background-color .12s; }
a.pn-t:hover { background: var(--surface-2); }
.pn-t--h { font: 600 10px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); border-radius: 0; padding-bottom: 8px; }
.pn-t > span:nth-child(n+3) { text-align: center; }
.pn-pos { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); font-weight: 600; font-size: 11px; } .pn-pos--top { background: var(--ok-bg); color: var(--ok); }
.pn-tn { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-ui); } .pn-tn b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-pts { font-weight: 700; color: var(--ink); } .pn-t .up { color: var(--ok); } .pn-t .down { color: var(--bad); }
.pn-form { display: inline-flex; gap: 3px; justify-content: center; }
.pn-d { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font: 700 8.5px/1 var(--font-data); font-style: normal; color: #fff; background: #8C9A92; }
.pn-d--W { background: linear-gradient(135deg, #5FA882, #1B6746); } .pn-d--L { background: linear-gradient(135deg, #D77D70, #B24A3D); }
.pn-tabs { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.pn-tab { height: 26px; padding: 0 13px; border: 0; border-radius: 99px; background: transparent; color: var(--ink-2); font: 500 var(--fs-xs)/1 var(--font-ui); cursor: pointer; } .pn-tab.is-on { background: var(--brand); color: #fff; box-shadow: 0 4px 10px rgba(27, 103, 70, 0.3); }
.pn-fixtures { display: flex; flex-direction: column; padding: 0 8px 8px; }
.pn-fx { display: grid; grid-template-columns: minmax(0, 1fr) 22px 54px 22px minmax(0, 1fr) 50px; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-size: var(--fs-sm); transition: background-color .12s; }
.pn-fx:hover { background: var(--surface-2); }
.pn-fx__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-fx__t--r { text-align: right; } .pn-fx__t.is-w { color: var(--ink); font-weight: 700; }
.pn-fx__s { display: inline-flex; justify-content: center; align-items: center; gap: 3px; padding: 3px 0; border-radius: 8px; background: var(--ink); color: #fff; font: 600 .9rem/1 var(--font-data); } .pn-fx__s i { font-style: normal; opacity: .5; } .pn-fx__s--n { background: var(--surface-3); color: var(--ink-3); font-size: var(--fs-xs); }
.pn-fx em { font: 500 10.5px/1 var(--font-data); font-style: normal; color: var(--ink-3); text-align: right; }
.pn-fx__pend { grid-column: 1 / -1; text-align: center; margin-top: -2px; }
.pn-showall { margin: 6px 8px 2px; height: 30px; border: 1px solid var(--line-strong); border-radius: 99px; background: #fff; color: var(--ink-2); font: 500 var(--fs-xs)/1 var(--font-ui); cursor: pointer; } .pn-showall:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-tint); }

/* Goleadores */
.pn-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding: 6px 14px 0; }
.pn-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: inherit; animation: alabRise .5s var(--ease) both; }
.pn-pod--2 { animation-delay: .06s; } .pn-pod--3 { animation-delay: .12s; } .pn-pod--empty { visibility: hidden; }
.pn-pod__crown { height: 16px; color: #C9921A; font-size: 16px; line-height: 1; }
.pn-pod__img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid #fff; background: var(--surface-3); box-shadow: 0 0 0 2px var(--line-strong), 0 8px 16px rgba(17, 28, 22, 0.18); transition: transform .18s var(--ease); }
.pn-pod--1 .pn-pod__img { width: 66px; height: 66px; box-shadow: 0 0 0 3px #E7B84B, 0 10px 22px rgba(201, 146, 26, 0.35); }
.pn-pod:hover .pn-pod__img { transform: scale(1.06); }
.pn-pod b { max-width: 100%; font-size: var(--fs-sm); font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-pod__team { max-width: 100%; font-size: 10px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-pod strong { font: 700 1.3rem/1 var(--font-data); letter-spacing: -0.03em; color: var(--brand-ink); } .pn-pod strong small { font: 500 10px/1 var(--font-ui); color: var(--ink-3); letter-spacing: 0; }
.pn-pod__b { width: 100%; height: 34px; margin-top: 4px; border-radius: 10px 10px 0 0; display: grid; place-items: start center; padding-top: 6px; background: linear-gradient(180deg, #C9D6CE, #EEF2EF); }
.pn-pod--1 .pn-pod__b { height: 58px; background: linear-gradient(180deg, #7DB596, #1B6746); } .pn-pod--3 .pn-pod__b { height: 24px; background: linear-gradient(180deg, #E9DDC8, #F6F0E4); }
.pn-pod__b i { font: 700 1.05rem/1 var(--font-data); font-style: normal; color: rgba(17, 28, 22, 0.5); } .pn-pod--1 .pn-pod__b i { color: #fff; }
.pn-srs { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.pn-sr { display: grid; grid-template-columns: 20px 28px minmax(0, 1fr) minmax(0, 0.8fr) 28px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 9px; text-decoration: none; color: inherit; font-size: var(--fs-xs); } .pn-sr:hover { background: var(--surface-2); }
.pn-sr i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); font: 600 10px/1 var(--font-data); font-style: normal; }
.pn-sr__img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--surface-3); }
.pn-sr b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-sr span { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-sr strong { font: 700 var(--fs-sm)/1 var(--font-data); text-align: right; }

/* Jóvenes */
.pn-young { display: flex; flex-direction: column; padding: 0 8px 8px; }
.pn-yg { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background-color .12s, transform .15s var(--ease); animation: alabRise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.pn-yg:hover { background: var(--surface-2); transform: translateX(2px); }
.pn-yg__img { width: 38px; height: 48px; border-radius: 9px; object-fit: cover; object-position: top; background: var(--surface-3); flex: none; box-shadow: 0 4px 10px rgba(17, 28, 22, 0.14); }
.pn-yg__m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pn-yg__m b { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-yg__m span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pn-yg__m em { font: 400 10px/1.3 var(--font-data); font-style: normal; color: var(--ink-3); }
.pn-sc { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--c), 0 4px 10px rgba(17, 28, 22, 0.1); --c: #C9921A; line-height: 1; }
.pn-sc b { font: 700 1rem/1 var(--font-data); letter-spacing: -0.03em; color: var(--c); } .pn-sc small { font-size: 7.5px; color: var(--ink-3); margin-top: 2px; }
/* UI-05: los tonos elite/pro/avg (cortes 70 y 62) se reemplazaron por los tramos de la fuente única: ver .pn-sc--t al final. */

/* Rachas y novedades */
.pn-streaks { display: flex; flex-direction: column; padding: 0 10px 10px; }
.pn-st { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; text-decoration: none; color: inherit; transition: background-color .12s; animation: alabRise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); } .pn-st:hover { background: var(--surface-2); }
.pn-st__m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .pn-st__m b { font-size: var(--fs-sm); font-weight: 600; } .pn-st__m span { font-size: 10.5px; color: var(--ink-3); }
.pn-bar { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .pn-bar u { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8FBFA5, #1B6746); text-decoration: none; }
.pn-st em { font: 700 1.5rem/1 var(--font-data); font-style: normal; letter-spacing: -0.04em; color: var(--brand-ink); }
.pn-news { display: flex; flex-direction: column; padding: 0 16px 12px; }
.pn-nw { padding: 10px 0; border-bottom: 1px solid var(--line); } .pn-nw:last-child { border-bottom: 0; }
.pn-nw > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pn-tag { padding: 3px 10px; border-radius: 99px; background: var(--brand-tint); color: var(--brand-ink); font: 600 10px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.pn-nw__l { font-size: var(--fs-xs); font-weight: 600; color: var(--brand); text-decoration: none; } .pn-nw__l:hover { text-decoration: underline; }
.pn-nw p { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); }

@media (max-width: 1100px) { .pn-work { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .pn-grid { grid-template-columns: minmax(0, 1fr); } .xi-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pn-hero { padding: 14px; } .pn-q span { display: none; } .pn-q { width: 40px; padding: 0; justify-content: center; }
  .xi-pitch { min-height: 460px; } .xi-p { width: 62px; } .xi-ph, .xi-img { width: 36px; height: 36px; } .xi-p b { font-size: 9.5px; } .xi-p small { display: none; }
  .xi-top a { grid-template-columns: 20px minmax(0, 1fr) 70px 28px; } .xi-top span { display: none; }
  .pn-t { grid-template-columns: 24px minmax(0, 1fr) 28px 34px 32px; } .pn-t > span:nth-child(6) { display: none; }
  .pn-fx { grid-template-columns: minmax(0, 1fr) 20px 46px 20px minmax(0, 1fr); } .pn-fx em { display: none; }
  .pn-recent { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .xi-p, .pn-pod, .pn-yg, .pn-st { animation: none !important; } }

/* Tu lista esta fecha */
.pn-help { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 8px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink-3); font: 600 11px/1 var(--font-ui); cursor: help; vertical-align: 2px; }
.pn-help:hover, .pn-help:focus-visible { color: var(--brand); border-color: var(--brand); outline: none; }
.pn-help__tip { position: absolute; z-index: 30; left: 50%; top: calc(100% + 8px); transform: translateX(-30%); width: 280px; padding: 12px 14px; border-radius: 10px; background: var(--ink); color: #fff; font: 400 12.5px/1.5 var(--font-ui); text-align: left; letter-spacing: 0; cursor: default; opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; }
.pn-help__tip b { display: block; margin-bottom: 4px; font-weight: 600; }
.pn-help:hover .pn-help__tip, .pn-help:focus .pn-help__tip, .pn-help:focus-within .pn-help__tip { opacity: 1; visibility: visible; }
/* Centrada sobre el "?": con left: 0 se salía 80 px a la derecha a 390 px y daba scroll horizontal a todo el Panel. */
@media (max-width: 760px) { .pn-help__tip { left: 50%; transform: translateX(-50%); width: min(280px, 80vw); } }
.pn-ml { display: flex; flex-direction: column; padding: 0 16px 12px; }
.pn-ml__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 4px; color: var(--ink-3); font-size: var(--fs-md); }
.pn-ml__empty b { color: var(--ink); font-weight: 600; }
.pn-ml__empty .btn { margin-top: 6px; }
.pn-mlr { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pn-mlr:hover { text-decoration: none; background: var(--surface-2); }
.pn-mlr__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pn-mlr > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-mlr b { font-weight: 600; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-mlr span { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-sc { flex: none; min-width: 40px; padding: 4px 8px; border-radius: 8px; text-align: center; font: 600 var(--fs-md) var(--font-data); font-style: normal; }
.pn-sc--none { background: var(--surface-2); color: var(--ink-3); }
.pn-ml__f { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--ink-3); } .pn-ml__f a { color: var(--brand); font-weight: 500; }
/* Estado de carga compartido (alab-ui.css): que ocupe todo el ancho aunque el contenedor sea una grilla. */
.pn-card .al-cargando, .pn-xi .al-cargando { grid-column: 1 / -1; }

/* Últimos partidos jugados (tarjetas compactas de css/alab-tarjeta-partido.css). Se cargan 8: 4 x 2 en pantallas anchas,
   3 x 2 (6) en escritorio común para que los nombres no queden cortados, 2 x 2 en tabletas, y apiladas en el celular (4 a la vista y el resto
   con "Ver los N partidos"). Sin scroll horizontal. */
.pn-ult__body { padding: 0 12px 12px; }
.pn-ult__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pn-ult__g > li { display: flex; flex-direction: column; min-width: 0; }
.pn-ult__g > li > .tp-mcw { flex: 1; }
.pn-ult__mas { display: none; width: calc(100% - 4px); margin: 10px 2px 0; }
.pn-ult__g > li:nth-child(n+7) { display: none; }
@media (min-width: 1440px) { .pn-ult__g { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pn-ult__g > li:nth-child(n+7) { display: flex; } }
@media (min-width: 641px) and (max-width: 900px) { .pn-ult__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pn-ult__g > li:nth-child(n+5) { display: none; } }
@media (max-width: 640px) {
  .pn-ult__body { padding: 0 10px 10px; }
  .pn-ult__g { grid-template-columns: minmax(0, 1fr); }
  .pn-ult__g > li:nth-child(n+5) { display: none; }
  .pn-ult__body.is-all .pn-ult__g > li { display: flex; }
  .pn-ult__mas { display: block; }
}

/* FOR-03: "Jugadores que vienen mejorando" — encabezado editorial con filete, pestañas por puesto y renglones tipo tabla. Componente reutilizable (Tu club). */
.pn-forma { margin-bottom: var(--sp-5, 20px); padding: 0; overflow: hidden; }
.pn-forma__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); }
.pn-forma__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing: -0.015em; line-height: 1.12; color: var(--ink); }
.pn-forma__sub { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-2); max-width: 56ch; }
.pn-forma__tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.pn-forma__tabs[hidden] { display: none; }
.pn-forma__tab { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font: 500 var(--fs-sm) var(--font-ui); cursor: pointer; white-space: nowrap; }
.pn-forma__tab i { font: 500 11px/1 var(--font-data); font-style: normal; color: var(--ink-3); }
.pn-forma__tab:hover { color: var(--ink); }
.pn-forma__tab.is-on { background: var(--surface); color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand); }
.pn-forma__tab.is-on i { color: var(--brand); }
.pn-forma__tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus, rgba(27, 103, 70, .35)); }
.pn-forma__body { padding: 4px 12px 8px; }
.pn-forma__cab, .pn-fr { display: grid; grid-template-columns: 28px 32px minmax(0, 1fr) 78px 78px 104px 76px; column-gap: 12px; align-items: center; }
.pn-forma__cab { padding: 12px 12px 8px; font: 600 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.pn-forma__cab span:nth-child(1) { grid-column: 1 / 4; }
.pn-forma__cab span:nth-child(2), .pn-forma__cab span:nth-child(3), .pn-forma__cab span:nth-child(5) { text-align: right; }
.pn-forma__cab span:nth-child(4) { text-align: center; }
.pn-fr { min-height: 56px; padding: 6px 12px; border-top: 1px solid var(--line); border-radius: 0; text-decoration: none; color: inherit; }
.pn-fr:hover { background: var(--brand-tint); }
.pn-fr:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pn-fr__n { font: 500 var(--fs-sm) var(--font-data); color: var(--ink-3); text-align: right; }
.pn-fr__c { width: 32px; height: 32px; object-fit: contain; }
.pn-fr__who { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.pn-fr__who b { font-weight: 500; font-size: var(--fs-md); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-fr__who small { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-fr__u, .pn-fr__p { text-align: right; font: 500 var(--fs-md) var(--font-data); color: var(--ink); }
.pn-fr__p { color: var(--ink-3); }
.pn-fr__sp { display: flex; justify-content: center; }
.pn-sp { display: block; overflow: visible; }
.pn-sp__b { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.pn-sp__l { fill: none; stroke: var(--brand); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pn-sp__p { fill: var(--brand); }
.pn-fr__d { justify-self: end; padding: 4px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-ink); font: 500 var(--fs-sm) var(--font-data); white-space: nowrap; }
.pn-forma__vacio, .pn-forma__espera { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 28px 24px 32px; }
.pn-forma__vacio b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--ink); }
.pn-forma__vacio span, .pn-forma__espera p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); max-width: 60ch; }
.pn-forma__espera h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--ink); }
.pn-forma__prog { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.pn-forma__prog > span { font-size: var(--fs-sm); color: var(--ink-2); }
.pn-forma__prog b { font-family: var(--font-data); font-weight: 500; color: var(--ink); }
.pn-forma__bar { display: block; width: min(280px, 60vw); height: 6px; border-radius: 999px; background: var(--brand-tint-2); overflow: hidden; }
.pn-forma__bar i { display: block; height: 100%; background: var(--brand); }
.pn-forma__pie { padding: 12px 24px 18px; border-top: 1px solid var(--line); }
.pn-forma__pie p { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); max-width: 90ch; }
.pn-forma__pie b { font-family: var(--font-data); font-weight: 500; color: var(--ink-2); }
@media (max-width: 720px) {
  .pn-forma__head { padding: 16px 16px 12px; }
  .pn-forma__tabs { width: 100%; justify-content: space-between; }
  .pn-forma__tab { flex: 1; justify-content: center; padding: 7px 6px; font-size: 12px; }
  .pn-forma__body { padding: 0 4px 4px; }
  .pn-forma__cab { display: none; }
  .pn-fr { grid-template-columns: 22px 32px minmax(0, 1fr) auto; grid-template-areas: "n c who d" ". . meta sp"; row-gap: 6px; padding: 12px 10px; min-height: 0; }
  .pn-fr__n { grid-area: n; } .pn-fr__c { grid-area: c; } .pn-fr__who { grid-area: who; } .pn-fr__d { grid-area: d; }
  .pn-fr__u, .pn-fr__p { grid-area: meta; text-align: left; font-size: var(--fs-sm); }
  .pn-fr__u::before, .pn-fr__p::before { content: attr(data-k) " "; font: 400 var(--fs-xs) var(--font-ui); color: var(--ink-3); }
  .pn-fr__p { display: none; }
  .pn-fr__u::after { content: " · prom. " attr(data-p); font: 400 var(--fs-xs) var(--font-ui); color: var(--ink-3); }
  .pn-fr__sp { grid-area: sp; justify-content: flex-end; }
  .pn-forma__pie { padding: 12px 16px 16px; }
}
@media (max-width: 720px) { .pn-fr__who b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
.pn-forma__cab span { white-space: nowrap; }
@media (max-width: 720px) { .pn-forma__tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; } .pn-forma__tabs[hidden] { display: none; } }

/* FOR-05: jugador con foto (solo dentro de la app, con silueta de respaldo) y tono sobrio para "vienen bajando" (terracota de los tokens, sin rojo fuerte). */
.pn-fr__c--foto { width: 38px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.pn-fr--foto { min-height: 62px; }
.pn-fr--baja .pn-sp__l { stroke: var(--res-loss); }
.pn-fr--baja .pn-sp__p { fill: var(--res-loss); }
.pn-fr--baja .pn-fr__d { background: var(--bad-bg); color: var(--bad); }
.pn-fr--baja:hover { background: var(--surface-2); }

/* Tu lista esta fecha: bloque de la Primera B Nacional (SPM-05B1). El Rating (0 a 10) va en tono neutro y rotulado, aparte del Puntaje. */
.pn-ml__h { margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--line); font: 600 var(--fs-xs) var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.pn-sc--rt { display: inline-flex; flex-direction: column; align-items: center; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pn-sc--rt small { font: 400 8.5px/1.2 var(--font-ui); color: var(--ink-3); }
.pn-ml__n { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }

/* PAN-01: Panel con otra liga elegida (Primera B Nacional). Rating de 0 a 10 en tono neutro (nunca los colores del Puntaje) y estados "todavía juntando datos". */
.xi-mvp--rt { background: var(--surface); border-color: var(--line-strong); box-shadow: none; }
.xi-mvp--rt .xi-mvp__t { color: var(--ink-3); }
.xi-mvp--rt .xi-mvp__b strong { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; color: var(--ink); font-size: 1.7rem; }
.xi-mvp--rt .xi-mvp__b strong small { font: 400 9px/1 var(--font-ui); letter-spacing: 0; color: var(--ink-3); }
.pn-yg .pn-sc--rt b { color: var(--ink); font-size: .95rem; }
.pn-fr__c.al-ini { display: inline-grid; width: 32px; height: 32px; font-size: 11px; }
.pn-wait { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px 20px 26px; }
.pn-wait h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); }
.pn-wait p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); max-width: 52ch; }
.pn-wait__p { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.pn-wait__p i { display: block; width: min(220px, 55vw); height: 6px; border-radius: 999px; background: var(--brand-tint-2); overflow: hidden; }
.pn-wait__p u { display: block; height: 100%; background: var(--brand); text-decoration: none; }
.pn-xi__body .pn-wait { padding: 40px 24px 44px; }
.pn-card .card__head .pn-tabs + .pn-more, .pn-card .card__head #stZonas { flex: none; }
.pn-head--wrap { flex-wrap: wrap; gap: 8px 12px; }

/* UI-05: cifra pintada por tramos (Puntaje o Rating, de la temporada o de la fecha). El fondo, el borde y la tinta llegan en línea desde
   ALAB_LIGA_METRICAS.pintar (js/alab-liga-metricas.js) junto con --tramo y --tramo-tinta; acá solo se acomoda lo que el CSS de arriba pinta aparte. */
.pn-sc.pn-sc--t { --c: var(--tramo); box-shadow: none; }
.pn-yg .pn-sc.pn-sc--t { box-shadow: 0 4px 10px rgba(17, 28, 22, 0.1); }
.pn-sc.pn-sc--t b, .pn-sc.pn-sc--t small { color: var(--tramo-tinta); }
.pn-sc.pn-sc--t small { opacity: .85; }
.pn-sc--hi, .pn-sc--top { font-weight: 700; }