/*
Theme Name: Guafutbol
Theme URI: https://gldistribuidora.com.gt/guafutbol
Author: GL Designs
Author URI: https://gldistribuidora.com.gt
Description: Tema a medida para Guafutbol — la vitrina del fútbol guatemalteco. Plataforma de perfiles y estadísticas de jugadores con dashboard privado, perfil público tipo "cromo", buscador por división y zonas de publicidad. Diseño dark mode con acento verde lima neón. Requiere Advanced Custom Fields PRO.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: guafutbol
Tags: sports, custom-post-type, dark-mode, custom-colors, full-width-template, footer-widgets
*/

/* ============================================================
   Guafutbol by GL Designs
   ------------------------------------------------------------
   Esta hoja contiene únicamente la cabecera del tema (obligatoria
   para WordPress) y algunos estilos base globales. Los estilos
   específicos de cada vista viven en /css/:
     - css/home.css                  (portada)
     - css/plataforma-jugadores.css  (dashboard + perfil público)
     - css/anuncios.css              (zonas de publicidad)
   y se cargan condicionalmente desde functions.php.
   ============================================================ */

:root {
	--gf-fondo: #101418;
	--gf-neon:  #c8f31d;
	--gf-texto: #f2f2f2;
}

body {
	margin: 0;
	background: var(--gf-fondo);
	color: var(--gf-texto);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--gf-neon); }

/* Utilidad para lectores de pantalla (accesibilidad) */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal !important;
}

/* ============================================================
   ESTILOS BASE — header, footer, archivo, páginas
   (para las vistas que usan get_header()/get_footer())
   ============================================================ */

/* Header del sitio */
.gf-site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(16,20,24,0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid #2c333d;
}
.gf-site-header-inner {
	max-width: 1200px; margin: 0 auto; padding: 14px 24px;
	display: flex; align-items: center; gap: 28px;
}
.gf-site-logo { text-decoration: none; font-weight: 900; font-size: 20px; color: var(--gf-texto); text-transform: uppercase; letter-spacing: 1px; }
.gf-site-logo img { max-height: 44px; width: auto; }
.gf-site-nav { display: flex; gap: 24px; margin-left: auto; }
.gf-site-nav a, .gf-menu a { color: #9aa2ad; text-decoration: none; font-size: 15px; font-weight: 600; }
.gf-site-nav a:hover, .gf-menu a:hover { color: var(--gf-texto); }
.gf-menu { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.gf-btn-neon { background: var(--gf-neon); color: #101418; text-decoration: none; font-size: 14px; font-weight: 800; padding: 11px 20px; border-radius: 8px; }
.gf-btn-neon:hover { filter: brightness(1.1); color: #101418; }

.gf-site-main { max-width: 1100px; margin: 0 auto; padding: 40px 24px; min-height: 50vh; }

/* Footer del sitio */
.gf-site-footer { background: #0d1014; border-top: 1px solid #2c333d; }
.gf-site-footer-inner { max-width: 1100px; margin: 0 auto; padding: 22px 24px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.gf-footer-copy { color: #9aa2ad; font-size: 13px; }
.gf-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.gf-footer-links a { color: #9aa2ad; text-decoration: none; font-size: 13px; }
.gf-footer-links a:hover { color: var(--gf-neon); }

/* Archivo de jugadores */
.gf-archivo-titulo { font-size: 30px; margin: 0 0 20px; }
.gf-archivo-filtros { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.gf-chip { padding: 9px 18px; border-radius: 30px; border: 1px solid #2c333d; background: #1a1f26; color: #9aa2ad; font-size: 14px; font-weight: 600; text-decoration: none; }
.gf-chip:hover, .gf-chip.activo { border-color: var(--gf-neon); color: var(--gf-neon); }
.gf-archivo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.gf-jugador-card { background: #1a1f26; border: 1px solid #2c333d; border-radius: 12px; overflow: hidden; transition: transform .18s ease, border-color .18s ease; }
.gf-jugador-card:hover { transform: translateY(-4px); border-color: var(--gf-neon); }
.gf-jugador-card a { text-decoration: none; color: inherit; display: block; }
.gf-jugador-card-foto { aspect-ratio: 4/3; background: #222831; overflow: hidden; }
.gf-jugador-card-foto img { width: 100%; height: 100%; object-fit: cover; }
.gf-jugador-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: .3; }
.gf-jugador-card-body { padding: 16px 18px; }
.gf-jugador-card-body h2 { margin: 0 0 4px; font-size: 17px; }
.gf-jugador-card-meta { margin: 0 0 10px; color: #9aa2ad; font-size: 13px; }
.gf-jugador-card-div { display: inline-block; padding: 3px 11px; border-radius: 20px; background: rgba(200,243,29,0.12); color: var(--gf-neon); font-size: 12px; font-weight: 700; text-transform: uppercase; }

/* Páginas estáticas y listados */
.gf-page-inner, .gf-lista { max-width: 780px; margin: 0 auto; }
.gf-page-titulo, .gf-lista-titulo { font-size: 30px; margin: 0 0 22px; }
.gf-page-contenido { color: #d5d9de; line-height: 1.8; }
.gf-page-contenido h2 { color: var(--gf-texto); margin-top: 32px; }
.gf-page-contenido a { color: var(--gf-neon); }
.gf-lista-item { border-bottom: 1px solid #2c333d; padding: 22px 0; }
.gf-lista-item h2 { margin: 0 0 8px; }
.gf-lista-item h2 a { color: var(--gf-texto); text-decoration: none; }
.gf-lista-extracto { color: #9aa2ad; }
.gf-lista-mas, .gf-vacio a { color: var(--gf-neon); text-decoration: none; }
.gf-vacio, .gf-vacio-texto { text-align: center; color: #9aa2ad; padding: 40px 0; }
.gf-paginacion { margin-top: 30px; text-align: center; }
.gf-paginacion a, .gf-paginacion .current { color: var(--gf-neon); padding: 6px 12px; text-decoration: none; }

@media (max-width: 820px) {
	.gf-site-nav { display: none; }
	.gf-site-footer-inner { flex-direction: column; text-align: center; }
}