/* Mi lista: capa premium (estados de color, tarjetas, selección, agregar, compartir) */

/* Agregar desde la lista */
.page-head__actions { align-items: center; flex-wrap: wrap; }
.slx-addwrap { position: relative; width: min(340px, 100%); }
.slx-addwrap .input { width: 100%; height: 40px; }
.slx-addres { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); max-height: 380px; overflow: auto; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-float); }
.slx-addres[hidden] { display: none; }
.slx-ar { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; font-family: var(--font-ui); }
.slx-ar:hover { background: var(--brand-tint); }
.slx-ar b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slx-ar span { font-size: 11.5px; color: var(--ink-3); }
.slx-ar em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--brand); }
.slx-ar__m { padding: 14px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* Fotos, escudos, puntaje */
.slx-ph { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface-3); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); flex: none; }
.slx-pl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.slx-pl .sl-name { font-weight: 600; }
.slx-notedot { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; background: #FBF4DC; color: #7A5600; font: 600 10.5px/1 var(--font-ui); cursor: help; white-space: nowrap; }
.slx-crest { width: 20px; height: 20px; object-fit: contain; flex: none; }
.slx-sc { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #B8C4BC; font: 600 12.5px/1 var(--font-data); color: var(--ink-2); }
/* UI-05: el color de cada tramo (fondo, borde y tinta) llega en línea desde ALAB_LIGA_METRICAS.pintar (js/alab-liga-metricas.js), la única fuente. */
.slx-sc--hi, .slx-sc--top, .slx-rt--hi, .slx-rt--top { font-weight: 700; }
.slx-rt[style] small { color: inherit; opacity: .85; }
.slx-ley { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 10px 20px 6px; }
#lvLey.slx-ley { padding: 0 0 12px; }
.slx-ley[hidden] { display: none; }
.slx-sc--big { width: 44px; height: 44px; font-size: 15px; }
.slx-num { font-family: var(--font-data); }

/* Estado y carpeta */
.slx-st { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c) 40%, #fff); background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--ink); font: 600 12px/1 var(--font-ui); cursor: pointer; white-space: nowrap; transition: box-shadow .15s; }
.slx-st i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.slx-st:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.slx-st.is-none { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-3); font-weight: 500; }
.slx-fd { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 500 12px/1 var(--font-ui); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slx-fd .icon { width: 13px; height: 13px; flex: none; color: var(--ink-3); }
.slx-fd:hover { border-color: var(--brand); color: var(--ink); }
.slx-act { display: inline-flex; gap: 2px; }
.slx-act .has-note { color: var(--brand); background: var(--brand-tint); }
.slTable tr.is-sel td { background: var(--brand-tint); }
.slx-chk { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.slTable th.c, .slTable td.c { width: 40px; text-align: center; }

/* Menús */
.slx-menu { position: fixed; z-index: 10005; min-width: 190px; max-height: 340px; overflow: auto; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-float); }
.slx-menu[hidden] { display: none; }
.slx-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.slx-mi { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 500 13px/1 var(--font-ui); text-align: left; cursor: pointer; }
.slx-mi:hover { background: var(--surface-2); }
.slx-mi.is-on { background: var(--brand-tint); font-weight: 600; }
.slx-mi i { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Nota */
.slx-note { position: fixed; z-index: 10005; width: 290px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-float); }
.slx-note[hidden] { display: none; }
.slx-note p { margin: 0 0 8px; font: 600 11px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.slx-note textarea { width: 100%; resize: none; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 10px; font: 400 13px/1.4 var(--font-ui); color: var(--ink); background: var(--surface); }
.slx-note textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus); }
.slx-note__b { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: var(--ink-3); }
.slx-note__b > div { display: flex; gap: 6px; }

/* Botones chicos */
.slx-btn { height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 12.5px/1 var(--font-ui); cursor: pointer; transition: all .15s; }
.slx-btn:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-tint); }
.slx-btn:disabled { opacity: .45; cursor: not-allowed; }
.slx-btn--ok { background: var(--brand); border-color: var(--brand); color: #fff; }
.slx-btn--ok:hover:not(:disabled) { background: var(--brand-hover); }
.slx-btn--danger { color: var(--bad); }
.slx-btn--danger:hover:not(:disabled) { background: var(--bad-bg); border-color: #E3B8B1; }
.slx-btn--ghost { border-color: transparent; background: transparent; color: var(--ink-3); }

/* Herramientas y barra en lote */
.slx-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.slx-views { display: inline-flex; padding: 3px; background: var(--surface-3); border-radius: var(--r-md); gap: 2px; }
.slx-vbtn { height: 28px; padding: 0 13px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: 500 12.5px/1 var(--font-ui); cursor: pointer; }
.slx-vbtn.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 28, 22, .12); }
.slx-shareWrap { display: flex; gap: 8px; }
.slx-shareWrap[hidden] { display: none; }
.slx-bulk { position: sticky; top: calc(var(--topbar-h, 60px) + 8px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 20px; padding: 9px 14px; border-radius: 12px; background: #0F2D22; color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.slx-bulk[hidden] { display: none; }
.slx-bulk b { margin-right: auto; font-size: 13px; }
.slx-bulk .slx-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.slx-bulk .slx-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.slx-bulk .slx-btn--danger { color: #FFC9C0; }
.slx-bulk .slx-btn--ghost { background: transparent; border-color: transparent; color: rgba(255, 255, 255, .7); }

/* Vacíos */
.slx-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 38px 16px; text-align: center; }
.slx-empty b { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.slx-empty span { font-size: 13px; color: var(--ink-3); max-width: 46ch; }

/* Tarjetas */
.slx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; padding: 16px 20px 20px; }
.slx-cards[hidden] { display: none; }
.slx-cards > .slx-empty { grid-column: 1 / -1; }
.slx-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 14px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--c); transition: box-shadow .15s, border-color .15s, transform .15s; text-align: center; }
.slx-card:hover { border-color: var(--line-strong); box-shadow: inset 0 3px 0 var(--c), 0 10px 24px rgba(17, 28, 22, .1); transform: translateY(-1px); }
.slx-card.is-sel { background: var(--brand-tint); border-color: var(--brand); }
.slx-card__top { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: flex-start; }
.slx-card__ph { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--surface-3); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 14px rgba(17, 28, 22, .12); margin-top: 6px; }
.slx-card__n { margin-top: 6px; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--ink); text-decoration: none; }
.slx-card__n:hover { color: var(--brand); }
.slx-card__t { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--ink-2); }
.slx-card__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin: 8px 0 2px; }
.slx-card__g > div { padding: 6px 2px; border-radius: 9px; background: var(--surface-2); }
.slx-card__g b { display: block; font: 600 14px/1.1 var(--font-data); color: var(--ink); }
.slx-card__g span { font-size: 10px; color: var(--ink-3); }
.slx-card__note { width: 100%; margin: 4px 0 0; padding: 7px 10px; border-radius: 9px; background: #FBF4DC; color: #5C4300; font-size: 12px; line-height: 1.4; text-align: left; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slx-card__f { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.slx-card .slx-act { margin-top: 6px; }

@media (max-width: 900px) { .slx-tools { padding: 10px 14px; flex-wrap: wrap; } .slx-bulk { margin: 10px 14px; } .slx-cards { padding: 12px 14px 16px; } }

.slTable th, .slTable td { padding-inline: 10px; }
.slTable td .sl-team-cell span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head__actions { flex-wrap: nowrap; }
.slx-addwrap { width: 290px; flex: none; }
@media (max-width: 900px) { .page-head__actions { flex-wrap: wrap; } .slx-addwrap { width: 100%; } }

.slx-tip { position: fixed; z-index: 10006; max-width: 300px; padding: 11px 14px; border-radius: 12px; background: #0F2D22; color: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .3); pointer-events: none; }
.slx-tip[hidden] { display: none; }
.slx-tip b { display: block; margin-bottom: 4px; font: 600 11px/1.3 var(--font-data); letter-spacing: .04em; text-transform: uppercase; color: #E7B84B; }
.slx-tip p { margin: 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Jugadores de dos ligas en Mi lista (SPM-05B1): etiqueta de liga, Rating en tono neutro (nunca los colores del Puntaje) y fila reducida */
.slx-liga { display: inline-block; flex: none; padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-3); font: 500 10.5px/1.5 var(--font-ui); white-space: nowrap; }
.slx-liga--bn { color: var(--brand); border-color: var(--brand-tint, #cfe3d8); background: var(--brand-tint, #EAF3EE); }
.slx-rt { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 44px; padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm, 6px); background: var(--surface); color: var(--ink); font: 500 12.5px/1.15 var(--font-data); }
.slx-rt small { font: 400 9px/1.2 var(--font-ui); color: var(--ink-3); }
.slx-rt--big { min-width: 56px; font-size: 15px; }
.slx-soon { font-size: 11.5px; color: var(--ink-3); font-style: italic; }
.slx-pl .slx-nolink { font-weight: 600; color: var(--ink); }
.slx-btn[disabled], .btn-icon[disabled] { opacity: .45; cursor: not-allowed; }
.slx-ar .slx-liga { margin-left: 6px; vertical-align: 1px; }
.slx-ligafilter { height: 40px; }