/* Plantel — player cards estilo coleccionable (foto dominante + datos sobre la foto) */

/* color por posición (oro=golero · azul=defensa · verde=medio · rojo=ataque) */
/* card = FOTO LIMPIA arriba (cuadrada, cara visible) + FOOTER SÓLIDO abajo con los datos.
   Sin overlay de texto sobre la cara; altura de info consistente sin importar el largo del nombre. */
.page-plantel .tcard { --pc: #6f86b8; position: relative; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
    border: 2px solid color-mix(in srgb, var(--pc) 42%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 20%, #0e1f44), #0a1733);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .32); }
.page-plantel .tcard.pos-GK { --pc: #ffc233; }
.page-plantel .tcard.pos-DEF { --pc: #3d7bff; }
.page-plantel .tcard.pos-MED { --pc: #28c281; }
.page-plantel .tcard.pos-ATA { --pc: #ff5a6a; }

/* foto: bloque cuadrado limpio arriba (no absolute) — la cara nunca se tapa */
.page-plantel .tcard__ph { position: relative; aspect-ratio: 1 / 1; height: auto; overflow: hidden; display: block; }
.page-plantel .tcard__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transform: none; filter: saturate(.92) contrast(1.05) brightness(.97); }   /* Fase 2: leve desaturación → las fotos dispares armonizan con el navy + los monogramas, no como collage */
.page-plantel .tcard__ph::before { box-shadow: inset 0 3px 0 0 var(--pc); z-index: 2; }   /* franja superior color posición */
/* scrim inferior: funde la foto/monograma con el footer → la card se lee como una pieza, no foto+bloque */
.page-plantel .tcard__ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pc) 16%, #0a1733) 94%); }
/* GARANTÍA anti-P0: la foto se posiciona por encima del placeholder (.avph z-auto). Si hay foto, gana siempre. */
.page-plantel .tcard__ph img { position: relative; z-index: 1; }
/* placeholder sin foto: card institucional (EST.placeholder → .avph) — escudo Olimar + textura + monograma.
   Sin silueta. Sin z-index positivo → la foto real nunca se tapa (photoFace=IMG). */
.page-plantel .tcard__ph .avph:not(.avph--brand)::before { opacity: .22; background-size: 58%; }   /* escudo más presente en la card */
.page-plantel .tcard__ph .avph--nonum .avph__mono { top: auto; bottom: 8px; transform: translateX(-50%); font-size: 1.5rem; letter-spacing: .06em; color: color-mix(in srgb, #ffffff 84%, var(--pc)); text-shadow: 0 2px 8px rgba(2,6,23,.8); }
/* Fallback "sin foto": asset REAL bajado de la web (Wikimedia, CC0) — busto frontal cabeza+hombros,
   estilo "no photo" de FotMob/Sofascore. Se sirve local desde /images/placeholders/player-no-photo.svg
   como background-image (gris sobrio, SIN tinte-blob; el color de posición sólo da un tinte MUY sutil al
   fondo). Anclado abajo como un retrato → mismo encuadre que las fotos reales. Sin escudo, sin monograma:
   placeholder limpio y común. TODO el conjunto queda z-auto → la foto real (img z-index:1) gana SIEMPRE
   (contrato anti-P0: photoFace=IMG; el placeholder nunca tapa una foto). */
/* placeholder sin foto: MONOGRAMA con iniciales sobre el tinte de la posición — no más "muro gris"
   de siluetas idénticas repetidas 144 veces. Cada card gana identidad por iniciales + color de
   posición. z-auto: la foto real (img z-index:1) sigue ganando siempre (contrato anti-P0). */
.page-plantel .tcard__ph .avph--ph::after { display: none; }                                    /* sin silueta gris */
/* Escudo Olimar sutil de fondo: la card sin foto se lee como "carta del club, foto pendiente",
   no como dato faltante / base incompleta. z-index 0 → la foto real (img z-index:1) gana SIEMPRE
   (contrato anti-P0: photoFace=IMG). */
.page-plantel .tcard__ph .avph--ph::before { display: block; content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("/images/olimar-watermark-128.png?v=1") no-repeat center 34% / 56% auto;
    opacity: .14; pointer-events: none; }
.page-plantel .tcard__ph .avph--ph { z-index: auto;                                             /* la foto (z-index:1) gana */
    background: radial-gradient(122% 116% at 50% 22%, color-mix(in srgb, var(--pc) 30%, #12264f), #0a1733 88%); }
.page-plantel .tcard__ph .avph--ph .avph__mono {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset: 0; z-index: 1; margin: 0; transform: none;
    font-family: var(--disp); font-weight: 400; font-size: clamp(1.7rem, 7.6vw, 2.5rem);
    letter-spacing: .05em; line-height: 1; opacity: .96;
    color: color-mix(in srgb, #ffffff 62%, var(--pc));
    text-shadow: 0 2px 18px rgba(2, 6, 23, .62); }

/* badge de posición arriba-izq + dot de estado arriba-der (sobre la foto, chicos) */
.page-plantel .tcard .posb { position: absolute; top: 8px; left: 8px; z-index: 3; margin: 0 !important; }
.page-plantel .tcard__dot { top: 10px; right: 9px; }

/* footer SÓLIDO con los datos (nombre 1 línea + estado + edad/PJ/G), altura consistente */
.page-plantel .tcard__b { position: static; display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
    padding: 8px 10px 9px; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 10%, transparent), transparent); }
.page-plantel .tcard__nm { width: 100%; font-size: var(--fs-body-sm); font-weight: 800; color: #fff; line-height: 1.12;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.24em; }
.page-plantel .tcard__pos { font-size: .62rem; color: #9fb2d8; font-weight: 600; }
.page-plantel .tcard__meta { width: 100%; font-size: .58rem; color: #7e92ba; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* hover: levanta + glow en el color de la posición */
.page-plantel .tcard { transition: transform var(--mo-fast) var(--ease-spring), box-shadow var(--mo) ease, border-color var(--mo) ease; }
.page-plantel .tcard:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(0, 0, 0, .45); border-color: color-mix(in srgb, var(--pc) 60%, transparent); }

/* ---- filtros: disclosure (edades/docs colapsan en mobile, fijos en desktop) ---- */
.page-plantel .filttog { display: inline-flex; align-items: center; gap: 6px; position: relative; font: inherit; font-size: var(--fs-body); font-weight: 700;
    min-height: 44px;   /* P3.6: medía 32 y es el único acceso a los filtros extra en mobile */
    color: var(--tx-1); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; cursor: pointer;
    transition: background var(--mo-fast) ease, border-color var(--mo-fast) ease; }
.page-plantel .filttog:hover { background: rgba(255, 255, 255, .09); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.page-plantel .filttog[aria-expanded="true"] { background: color-mix(in srgb, var(--gold) 18%, transparent); border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold-2); }
.page-plantel .filttog__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.page-plantel .morefilt { display: none; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.page-plantel .morefilt.open { display: flex; animation: rv8 var(--mo-slow) ease; }
@media (min-width: 720px) {
    .page-plantel .filttog { display: none; }            /* en desktop sobra espacio: filtros siempre visibles */
    .page-plantel .morefilt { display: flex !important; }
}

/* ---- Habilitación: dot por estado + categoría + línea de motivo en la card ---- */
.page-plantel .tcard__dot.ok { background: #28c281; }
.page-plantel .tcard__dot.warn { background: #ffc233; }
.page-plantel .tcard__dot.bad { background: #ff4d5e; box-shadow: 0 0 8px rgba(255, 77, 94, .75); }

.page-plantel .tcard__cat { color: #8aa0cc; font-weight: 700; }
/* mobile 3-up (~115px de card): "ESTUDIANTE · Mayores" trunca a "…MAY". La categoría es
   redundante con el filtro de categoría → se oculta ≤430px y el renglón queda limpio. */
@media (max-width: 430px) {
    .page-plantel .tcard__cat { display: none; }
    .page-plantel .tcard__pos { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

.page-plantel .tcard__hab { width: 100%; display: flex; align-items: flex-start; gap: 4px; margin-top: 5px;
    padding: 4px 6px; border-radius: 8px; font-size: .58rem; font-weight: 700; line-height: 1.2; }
.page-plantel .tcard__hab i { font-size: var(--fs-body-sm); flex: 0 0 auto; margin-top: .5px; }
.page-plantel .tcard__habtx { overflow-wrap: anywhere; }   /* motivo completo (sin truncar): la habilitacion debe leerse entera */
.page-plantel .tcard__hab.hab-ok { color: #7ef0b4; background: rgba(40, 194, 129, .13); }
.page-plantel .tcard__hab.hab-warn { color: #ffd874; background: rgba(255, 194, 51, .14); }
.page-plantel .tcard__hab.hab-bad { color: #ff96a1; background: rgba(255, 77, 94, .16); }

/* ---- Resumen superior: chips de estado clickeables (filtran la grilla) ---- */
.page-plantel .poster__row--hab { margin-top: 8px; }
.page-plantel .habchip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-body-sm); font-weight: 700; cursor: pointer;
    min-height: 44px;   /* P3.6: medía 27 — era el target más chico de la app y FILTRA la grilla */
    color: var(--tx-1); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px;
    transition: background var(--mo-fast) ease, border-color var(--mo-fast) ease, transform var(--mo-xfast) ease; }
.page-plantel .habchip:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .09); }
.page-plantel .habchip b { font-variant-numeric: tabular-nums; }
.page-plantel .habchip i { font-size: var(--fs-body); }
.page-plantel .habchip--ok i { color: #28c281; }
.page-plantel .habchip--warn i { color: #ffc233; }
.page-plantel .habchip--bad i { color: #ff4d5e; }
.page-plantel .habchip--ok.on { background: rgba(40, 194, 129, .16); border-color: #28c281; color: #7ef0b4; }
.page-plantel .habchip--warn.on { background: rgba(255, 194, 51, .16); border-color: #ffc233; color: #ffd874; }
.page-plantel .habchip--bad.on { background: rgba(255, 77, 94, .16); border-color: #ff4d5e; color: #ff96a1; }

/* ---- Encabezado de grupo por posición (Fase 2 premium): la grilla se lee por líneas ---- */
.page-plantel .plgrouphd { --gpc: #6f86b8; grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
    margin: 22px 2px 2px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, color-mix(in srgb, var(--gpc) 12%, transparent), transparent 60%); }
.page-plantel .plgrouphd:first-child { margin-top: 4px; }
.page-plantel .plgrouphd__bar { width: 4px; height: 19px; border-radius: 2px; flex: none;
    background: var(--gpc); box-shadow: 0 0 10px color-mix(in srgb, var(--gpc) 70%, transparent); }
.page-plantel .plgrouphd__t { font-family: var(--disp); font-size: 1.06rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--tx); display: inline-flex; align-items: center; gap: 9px; line-height: 1; }
.page-plantel .plgrouphd__t .bi { color: var(--gpc); font-size: 1rem; }
.page-plantel .plgrouphd__n { margin-left: auto; font-size: var(--fs-body-sm); font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--tx-2); background: color-mix(in srgb, var(--gpc) 16%, rgba(255,255,255,.04)); border: 1px solid color-mix(in srgb, var(--gpc) 30%, transparent);
    border-radius: 999px; padding: 2px 10px; }
.page-plantel .plgrouphd--GK   { --gpc: #ffc233; }
.page-plantel .plgrouphd--DEF  { --gpc: #3d7bff; }
.page-plantel .plgrouphd--MED  { --gpc: #28c281; }
.page-plantel .plgrouphd--ATA  { --gpc: #ff5a6a; }
.page-plantel .plgrouphd--none { --gpc: #6f86b8; }