/* --------------------------------------------------------------------------
   HOME DE JUEGO — buscador de jugador, busquedas recientes y cabecera de noticias
   --------------------------------------------------------------------------
   Bloque identico que val-home.php y ft-home.php tenian duplicado cada uno en
   su <style> inline: 35 reglas escritas dos veces. Se carga ANTES del CSS de
   cada pagina, que solo redefine lo suyo (colores de error, hover de la card
   de resultado y el media query).
   -------------------------------------------------------------------------- */

.home-body { background: var(--bg-dark); min-height: 100vh; }

/* ── Panel izquierdo: buscador ──────────────────────────── */
.home-search-panel {
    position: sticky;
    top: 120px;
}

.home-search-eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: var(--sp-4);
}

.home-search-title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-extrabold);
    color: var(--text-white);
    line-height: 1.2;
    margin-bottom: var(--sp-3);
}

.home-search-title span { color: var(--brand-accent); }

.home-search-sub {
    font-size: var(--fs-md);
    color: var(--text-gray);
    margin-bottom: 28px;
    line-height: 1.6;
}

.player-search-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-9);
}

.search-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--sp-4);
}

.search-input-row {
    display: flex;
    gap: var(--sp-4);
}

.search-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-5) var(--sp-7);
    font-size: var(--fs-lg);
    color: var(--text-white);
    font-family: inherit;
    outline: none;
    transition: border-color var(--t-fast);
}

.search-input::placeholder { color: var(--text-muted); }

.search-input:focus { border-color: var(--brand-accent); }

.search-btn {
    background: var(--brand-accent);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--sp-5) var(--sp-8);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), transform .1s;
    font-family: inherit;
}

.search-btn:hover { background: var(--brand-accent-hover); transform: translateY(-1px); }

.search-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: var(--sp-4);
}

.search-hint b { color: var(--text-gray); }

.search-result.visible { display: block; }

.search-result-card {
    background: var(--bg-input);
    border: 1px solid var(--brand-accent);
    border-radius: var(--radius-md);
    padding: var(--sp-7);
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    text-decoration: none;
}

.src-avatar {
    width: 44px; height: 44px;
    border-radius: var(--radius-circle);
    background: var(--bg-card);
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xl);
    overflow: hidden;
    flex-shrink: 0;
}

.src-info { flex: 1; min-width: 0; }

.src-name { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text-white); }

.src-sub  { font-size: var(--fs-sm); color: var(--text-gray); margin-top: 2px; }

.src-arrow { color: var(--brand-accent); font-size: var(--fs-xl); }

.search-error.visible { display: block; }

.recent-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--sp-3);
}

.recent-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.recent-pill {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    padding: var(--sp-1) var(--sp-5);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-gray);
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
}

.recent-pill:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

.news-section-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.news-source-badge {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}