:root {
    --color-fondo: #0a0a0a; --color-texto-principal: #e0e0e0; --color-verde-neon: #00cb66; --color-borde: #222; --color-input-fondo: #1c1c1c;
}
body { background-color: var(--color-fondo); color: var(--color-texto-principal); font-family: 'Space Grotesk', sans-serif; margin: 0; padding: 1em; }
header { text-align: center; border-bottom: 1px solid var(--color-borde); padding-bottom: 1em; margin-bottom: 2em; }
header h1 { color: var(--color-verde-neon); font-weight: 700; letter-spacing: 2px; }
.contenedor-filtros { margin-bottom: 2em; }
#toggle-filtros { width: 100%; padding: 12px; background-color: var(--color-input-fondo); border: 1px solid var(--color-borde); color: var(--color-verde-neon); font-family: 'Space Grotesk', sans-serif; font-size: 1em; cursor: pointer; border-radius: 8px; transition: all 0.2s ease; text-align: center; font-weight: bold; }
#toggle-filtros:hover { border-color: var(--color-verde-neon); }
#panel-contenido { background-color: var(--color-input-fondo); border: 1px solid var(--color-borde); border-top: none; border-radius: 0 0 8px 8px; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; }
#panel-contenido.filtros-ocultos { max-height: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; }
#panel-contenido.filtros-visibles { max-height: 500px; padding: 1.5em; }
#formulario-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; }
#filtro-nombre, #filtro-posicion { width: 100%; padding: 10px; background-color: var(--color-fondo); border: 1px solid var(--color-borde); color: var(--color-texto-principal); font-family: 'Space Grotesk', sans-serif; font-size: 1em; border-radius: 4px; }
.grupo-filtro-tags, .grupo-filtro-presets { grid-column: 1 / -1; }
.grupo-filtro-presets label { display: block; text-align: center; margin-bottom: 0.8em; color: #aaa; }
#filtros-tags, #filtros-valoracion-preset { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#filtros-tags button, #filtros-valoracion-preset button { background-color: transparent; color: var(--color-texto-principal); border: 1px solid var(--color-borde); padding: 8px 12px; font-family: 'Space Grotesk', sans-serif; font-size: 0.9em; cursor: pointer; transition: all 0.2s ease-in-out; border-radius: 4px; }
#filtros-tags button:hover, #filtros-valoracion-preset button:hover { border-color: var(--color-verde-neon); color: var(--color-verde-neon); }
#filtros-tags button.filtro-activo, #filtros-valoracion-preset button.filtro-activo { background-color: var(--color-verde-neon); color: var(--color-fondo); border-color: var(--color-verde-neon); font-weight: 700; }
.grupo-filtro-reset { grid-column: 1 / -1; }
#limpiar-filtros { width: 100%; padding: 12px; background-color: #444; border: none; color: var(--color-texto-principal); font-family: 'Space Grotesk', sans-serif; font-size: 1em; cursor: pointer; border-radius: 4px; transition: background-color 0.2s ease; }
#limpiar-filtros:hover { background-color: #555; }
.info-resultados { display: flex; justify-content: center; align-items: center; gap: 20px; text-align: center; margin-bottom: 1em; color: #888; }
#mobile-sort-btn { display: none; }
.panel-jugadores, .tabla-jugadores { overflow-x: auto; }
.tabla-jugadores { width: 100%; border-collapse: collapse; margin: 0 auto; max-width: 900px; min-width: 600px; }
.tabla-jugadores th, .tabla-jugadores td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--color-borde); vertical-align: middle; }
.tabla-jugadores .info-jugador { display: flex; align-items: center; gap: 12px; }
.tabla-jugadores img { width: 25px; height: auto; }
.tabla-jugadores th { color: var(--color-verde-neon); font-weight: 700; font-size: 0.9em; text-transform: uppercase; position: relative; cursor: pointer; user-select: none; transition: color 0.2s ease; }
.tabla-jugadores th:hover span { color: white; }
.tabla-jugadores th .sort-arrow { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid var(--color-texto-principal); margin-left: 8px; opacity: 0.3; transition: all 0.2s ease; }
.tabla-jugadores th:hover .sort-arrow { opacity: 1; }
.tabla-jugadores th.sort-active .sort-arrow { opacity: 1; border-bottom-color: var(--color-verde-neon); }
.tabla-jugadores th.sort-active[data-direction="desc"] .sort-arrow { transform: rotate(180deg); }
.pos-tag { font-weight: bold; color: #1a1a1a; padding: 5px 10px; border-radius: 4px; text-align: center; display: inline-block; min-width: 30px; }
.pos-po { background-color: #c4b18e; } .pos-df, .pos-ld, .pos-li { background-color: #cac09c; } .pos-md, .pos-mo, .pos-mc { background-color: #b3cfb6; } .pos-ei, .pos-ed { background-color: #a1b4c2; } .pos-dc { background-color: #afaece; }
footer { text-align: center; margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--color-borde); color: #888; font-size: 0.9em; }
footer strong { color: var(--color-texto-principal); }
#sort-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 1000; display: flex; align-items: flex-end; opacity: 1; transition: opacity 0.3s ease; }
#sort-modal-overlay.hidden { opacity: 0; pointer-events: none; }
#sort-modal-panel { width: 100%; background-color: var(--color-input-fondo); border-top: 1px solid var(--color-borde); border-radius: 16px 16px 0 0; padding: 1.5em; transform: translateY(0); transition: transform 0.3s ease; }
#sort-modal-overlay.hidden #sort-modal-panel { transform: translateY(100%); }
.modal-header { text-align: center; margin-bottom: 1em; } .modal-header h2 { margin: 0; color: var(--color-verde-neon); }
.modal-options { margin-bottom: 1.5em; }
.sort-option { padding: 12px; border-bottom: 1px solid var(--color-borde); cursor: pointer; }
.sort-option:last-child { border-bottom: none; }
.sort-option.selected { background-color: rgba(0, 203, 102, 0.2); font-weight: bold; }
.sort-direction-toggle { display: flex; gap: 10px; margin-bottom: 1.5em; }
.sort-direction-toggle button { flex-grow: 1; padding: 10px; background-color: var(--color-fondo); border: 1px solid var(--color-borde); color: var(--color-texto-principal); cursor: pointer; border-radius: 4px; }
.sort-direction-toggle button.selected { background-color: var(--color-verde-neon); color: var(--color-fondo); font-weight: bold; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions button { flex-grow: 1; padding: 12px; border: none; font-size: 1em; font-family: 'Space Grotesk'; border-radius: 4px; cursor: pointer; }
#cancel-sort-btn { background-color: #444; color: var(--color-texto-principal); }
#apply-sort-btn { background-color: var(--color-verde-neon); color: var(--color-fondo); font-weight: bold; }

/* --- SECCIÓN RESPONSIVE COMPLETAMENTE NUEVA --- */
@media (max-width: 768px) {
    #formulario-filtros { grid-template-columns: 1fr; }
    .tabla-jugadores { min-width: unset; border: none; }
    .tabla-jugadores thead { display: none; }
    .tabla-jugadores tr { display: block; background-color: var(--color-input-fondo); margin-bottom: 0.8em; border-radius: 8px; border: 1px solid var(--color-borde); }
    .tabla-jugadores td { display: block; padding: 0; border: none; }
    
    .mobile-player-card { display: flex; padding: 12px; gap: 12px; align-items: flex-start; }
    .card-col-left { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
    .card-col-left .pos-tag { min-width: 40px; }
    .card-col-left .age-text { color: #aaa; font-size: 0.9em; }
    
    .card-col-right { flex-grow: 1; display: flex; flex-direction: column; }
    .card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .player-name { font-size: 1.2em; font-weight: bold; color: var(--color-texto-principal); }
    .copy-btn { background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; }
    .copy-btn svg { width: 18px; height: 18px; stroke: #888; transition: stroke 0.2s ease; }
    .copy-btn:hover svg { stroke: var(--color-verde-neon); }
    .copy-btn.copied svg { stroke: var(--color-verde-neon); }
    
    .card-stats { display: flex; gap: 15px; margin: 8px 0; }
    .stat { font-size: 0.9em; color: #aaa; }
    .stat strong { font-size: 1.1em; color: var(--color-texto-principal); }
    
    .card-price { font-size: 1.1em; font-weight: bold; color: var(--color-verde-neon); margin-top: auto; }
    
    #mobile-sort-btn { display: block; background-color: transparent; border: 1px solid var(--color-borde); color: var(--color-texto-principal); padding: 8px 15px; border-radius: 4px; font-family: 'Space Grotesk'; }
}