/*
 * Sistema de diseño "v2" de Veteranos Punilla (Bootstrap 5).
 * Compartido por todas las páginas *_v2.php. Ver includes/v2-head.php,
 * includes/v2-nav.php, includes/v2-pageheader.php, includes/v2-footer.php.
 */
:root{
	--vp-navy:#0a1930;
	--vp-navy-2:#12294d;
	--vp-navy-3:#193a6b;
	--vp-green:#1f7a3d;
	--vp-green-dark:#0f4d25;
	--vp-gold:#f2b705;
	--vp-gold-2:#ffd54a;
	--vp-paper:#f4f6f9;
	--vp-ink:#0a1930;
	--vp-muted:#6b7688;
	--vp-line:#e3e7ee;
	--vp-radius:16px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	font-family:'Inter',system-ui,sans-serif;
	background:var(--vp-paper);
	color:var(--vp-ink);
}
h1,h2,h3,h4,.vp-heading{
	font-family:'Oswald',sans-serif;
	text-transform:uppercase;
	letter-spacing:.03em;
}
a{ text-decoration:none; }

/* -------- barra de aviso -------- */
.vp-devbar{
	background:var(--vp-gold);
	color:var(--vp-navy);
	font-size:.85rem;
	font-weight:600;
	text-align:center;
	padding:.5rem 1rem;
}
.vp-devbar a{ color:var(--vp-navy); text-decoration:underline; }

/* -------- navbar -------- */
.vp-navbar{
	background:linear-gradient(180deg, var(--vp-navy) 0%, var(--vp-navy-2) 100%);
	box-shadow:0 2px 18px rgba(10,25,48,.25);
	padding:.6rem 0;
}
.vp-brand{ display:flex; align-items:center; gap:.65rem; }
.vp-brand img{
	width:44px; height:44px; object-fit:cover; border-radius:50%;
	background:#fff; border:2px solid var(--vp-gold);
	box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.vp-brand-text{ line-height:1.05; }
.vp-brand-text b{ color:#fff; font-family:'Oswald',sans-serif; font-size:1.15rem; letter-spacing:.04em; }
.vp-brand-text span{ color:var(--vp-gold-2); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; }
.vp-navbar .nav-link{
	color:rgba(255,255,255,.82); font-weight:500; font-size:.92rem;
	padding:.5rem .85rem !important; border-radius:8px;
}
.vp-navbar .nav-link:hover{ color:#fff; background:rgba(255,255,255,.08); }
.vp-navbar .nav-link.active{ color:#fff; background:rgba(255,255,255,.14); }
.vp-navbar .dropdown-menu{
	background:var(--vp-navy-2); border:1px solid rgba(255,255,255,.12); border-radius:12px;
	padding:.4rem; margin-top:.5rem;
}
.vp-navbar .dropdown-item{ color:rgba(255,255,255,.82); border-radius:8px; font-size:.9rem; padding:.5rem .75rem; }
.vp-navbar .dropdown-item:hover, .vp-navbar .dropdown-item:focus{ background:rgba(255,255,255,.1); color:#fff; }

/* -------- hero (home grande) -------- */
.vp-hero{
	position:relative; overflow:hidden;
	background:
		repeating-linear-gradient(135deg, rgba(31,122,61,.35) 0 36px, rgba(18,73,38,.35) 36px 72px),
		linear-gradient(120deg, var(--vp-navy) 0%, var(--vp-navy-2) 55%, var(--vp-navy-3) 100%);
	color:#fff;
	padding:4.2rem 0 6.5rem;
}
.vp-hero::after{
	content:"";
	position:absolute; inset:0;
	background:radial-gradient(600px 400px at 85% 10%, rgba(242,183,5,.18), transparent 60%);
	pointer-events:none;
}
/* -------- hero chico (encabezado de páginas internas) -------- */
.vp-hero-page{ padding:2.6rem 0 3rem; }
.vp-hero-page h1{ font-size:2.1rem; margin:.5rem 0 .2rem; }
.vp-hero-page p.lead{ color:rgba(255,255,255,.78); max-width:640px; margin-bottom:0; }
body.pagina-fechas .vp-hero-page p.lead{ max-width:none; }

.vp-hero-cats{
	display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
	margin-bottom:1.6rem;
}
.vp-hero-cats .lbl{
	color:rgba(255,255,255,.6); font-size:.78rem; font-weight:600;
	letter-spacing:.12em; text-transform:uppercase;
}
.vp-hero-cats .switch{
	display:inline-flex; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
	border-radius:999px; padding:5px; gap:4px;
}
.vp-hero-cats .switch a{
	font-family:'Oswald',sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.03em;
	color:rgba(255,255,255,.85); padding:.5rem 1.4rem; border-radius:999px; min-width:64px; text-align:center;
}
.vp-hero-cats .switch a.active{ background:var(--vp-gold); color:var(--vp-navy); box-shadow:0 4px 14px rgba(0,0,0,.25); }
.vp-hero .vp-eyebrow{
	display:inline-flex; align-items:center; gap:.4rem;
	background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
	color:var(--vp-gold-2); font-weight:700; font-size:.78rem; letter-spacing:.12em;
	padding:.35rem .8rem; border-radius:999px; text-transform:uppercase;
}
.vp-hero h1{
	font-size:3rem; font-weight:700; margin:.6rem 0 .3rem; color:#fff;
	text-shadow:0 4px 20px rgba(0,0,0,.35);
}
.vp-hero h1 small{ display:block; font-size:1.15rem; color:var(--vp-gold-2); letter-spacing:.1em; font-weight:500; }
.vp-hero p.lead{ color:rgba(255,255,255,.78); max-width:520px; }
.vp-hero-crest{
	width:190px; height:190px; border-radius:50%;
	background:#fff; padding:8px; box-shadow:0 18px 45px rgba(0,0,0,.45);
	border:4px solid var(--vp-gold);
}
.vp-hero-crest.sm{ width:88px; height:88px; padding:5px; border-width:3px; }

.vp-archived-alert{
	background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.85);
	font-size:.88rem; border-radius:12px; padding:.75rem 1rem;
}
.vp-archived-alert a{ color:var(--vp-gold-2); text-decoration:underline; }

.vp-next-card{
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.18);
	backdrop-filter:blur(6px);
	border-radius:var(--vp-radius);
	padding:1.25rem 1.4rem;
	color:#fff;
}
.vp-next-card .vp-tag{
	font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	color:var(--vp-gold-2);
}
.vp-next-teams{ display:flex; align-items:center; justify-content:space-between; margin:.75rem 0; gap:.5rem; }
.vp-next-teams .team{ text-align:center; flex:1; font-family:'Oswald',sans-serif; font-size:1.05rem; }
.vp-next-teams .vs{
	font-size:.8rem; color:var(--vp-gold-2); font-weight:700;
	border:1px solid rgba(255,255,255,.3); border-radius:50%; width:34px; height:34px;
	display:flex; align-items:center; justify-content:center; flex:none;
}

/* -------- stat strip -------- */
.vp-stats{ margin-top:-4.2rem; position:relative; z-index:2; }
.vp-stats.sm{ margin-top:-2.6rem; }
.vp-stat-card{
	background:#fff; border-radius:14px; padding:1.1rem 1.1rem;
	box-shadow:0 12px 30px rgba(10,25,48,.12);
	display:flex; align-items:center; gap:.85rem;
	border-top:4px solid var(--vp-green);
	height:100%;
}
.vp-stat-card:nth-child(2){ border-top-color:var(--vp-gold); }
.vp-stat-card:nth-child(3){ border-top-color:var(--vp-navy-3); }
.vp-stat-card:nth-child(4){ border-top-color:var(--vp-green-dark); }
.vp-stat-card .ic{
	width:46px; height:46px; border-radius:12px; flex:none;
	display:flex; align-items:center; justify-content:center;
	background:var(--vp-paper); color:var(--vp-navy); font-size:1.3rem;
}
.vp-stat-card .num{ font-family:'Oswald',sans-serif; font-size:1.5rem; font-weight:700; line-height:1; }
.vp-stat-card .lbl{ color:var(--vp-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }

/* -------- section heading -------- */
.vp-section{ padding:4rem 0; }
.vp-section.tight{ padding:2.5rem 0; }
.vp-section-title{ margin-bottom:.15rem; font-size:1.9rem; font-weight:700; color:var(--vp-navy); }
.vp-section-sub{ color:var(--vp-muted); margin-bottom:2rem; }
.vp-kicker{
	color:var(--vp-green); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
}

/* -------- fixtures -------- */
.vp-match-card{
	background:#fff; border-radius:var(--vp-radius); border:1px solid var(--vp-line);
	padding:1.1rem 1.2rem; height:100%;
	transition:transform .15s ease, box-shadow .15s ease;
}
.vp-match-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(10,25,48,.1); }
.vp-match-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.vp-match-team{ flex:1; display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:.95rem; min-width:0; }
.vp-match-team span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vp-match-team.right{ justify-content:flex-end; text-align:right; }
.vp-crest-mini{
	width:34px; height:34px; border-radius:8px; object-fit:contain; flex:none;
	background:#fff; border:1px solid var(--vp-line); padding:2px;
}
.vp-crest-fallback{
	width:34px; height:34px; border-radius:8px; flex:none;
	background:var(--vp-navy); color:#fff; font-size:.68rem; font-weight:700;
	display:flex; align-items:center; justify-content:center;
}
.vp-crest-lg{
	width:88px; height:88px; border-radius:14px; object-fit:contain; flex:none;
	background:#fff; border:1px solid var(--vp-line); padding:6px;
}
.vp-crest-lg-fallback{
	width:88px; height:88px; border-radius:14px; flex:none;
	background:var(--vp-navy); color:#fff; font-size:1.6rem; font-weight:700;
	display:flex; align-items:center; justify-content:center;
}
.vp-crest-hero{
	width:100%; height:100%; border-radius:14px; object-fit:contain;
	background:#fff; border:1px solid var(--vp-line); padding:10px;
}
.vp-crest-hero-fallback{
	width:100%; height:100%; border-radius:14px;
	background:var(--vp-navy); color:#fff; font-size:2.4rem; font-weight:700;
	display:flex; align-items:center; justify-content:center;
}
.vp-match-score{
	font-family:'Oswald',sans-serif; font-size:1.35rem; font-weight:700; color:var(--vp-navy);
	background:var(--vp-paper); border-radius:8px; padding:.15rem .7rem; flex:none;
}
.vp-match-score .sep{ color:var(--vp-muted); font-size:1rem; padding:0 .15rem; }
.vp-match-meta{
	margin-top:.7rem; padding-top:.6rem; border-top:1px dashed var(--vp-line);
	font-size:.78rem; color:var(--vp-muted); display:flex; gap:1rem; flex-wrap:wrap;
}
.vp-goles-row{
	margin-top:.7rem; padding-top:.6rem; border-top:1px dashed var(--vp-line);
	display:flex; gap:.6rem;
}
.vp-goles-col{ flex:1; min-width:0; font-size:.76rem; color:var(--vp-muted); line-height:1.55; }
.vp-goles-col.right{ text-align:right; }
.vp-goles-col i{ color:var(--vp-green); }
.badge-jugado{ background:var(--vp-green); }
.badge-programado{ background:transparent; border:1px solid var(--vp-gold); color:#a97c00 !important; }

/* -------- posiciones / tablas -------- */
.vp-pills .nav-link{
	font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.03em;
	color:var(--vp-navy); border-radius:999px; padding:.5rem 1.3rem; margin-right:.4rem;
	border:1px solid var(--vp-line);
}
.vp-pills .nav-link.active{ background:var(--vp-navy); color:#fff; }
table.vp-table{ width:100%; border-collapse:separate; border-spacing:0; }
table.vp-table thead th{
	background:var(--vp-navy); color:#fff; font-size:.72rem; text-transform:uppercase;
	letter-spacing:.06em; padding:.7rem .6rem; font-weight:600; border:none; white-space:nowrap;
}
table.vp-table thead th:first-child{ border-radius:10px 0 0 0; }
table.vp-table thead th:last-child{ border-radius:0 10px 0 0; }
table.vp-table tbody td{ padding:.6rem; border-bottom:1px solid var(--vp-line); vertical-align:middle; font-size:.9rem; }
table.vp-table tbody tr:hover{ background:#fbfbfd; }
table.vp-table tbody tr.top1 td:first-child{ border-left:4px solid var(--vp-gold); }
table.vp-table tbody tr.top2 td:first-child{ border-left:4px solid #b9c1cc; }
table.vp-table tbody tr.top3 td:first-child{ border-left:4px solid #c9873f; }
.vp-pos-num{ font-family:'Oswald',sans-serif; font-weight:700; color:var(--vp-muted); width:26px; display:inline-block; }
.vp-pts-badge{
	background:var(--vp-navy); color:#fff; font-family:'Oswald',sans-serif; font-weight:700;
	border-radius:8px; padding:.15rem .55rem; font-size:.9rem;
}
.vp-team-cell{ display:flex; align-items:center; gap:.6rem; font-weight:600; }
.vp-team-cell a{ color:inherit; }
.vp-team-cell a:hover{ color:var(--vp-green); }

/* -------- goleadores / rankings -------- */
.vp-scorer-row{
	display:flex; align-items:center; gap:.9rem; padding:.75rem .3rem;
	border-bottom:1px solid var(--vp-line);
}
.vp-scorer-row:last-child{ border-bottom:none; }
.vp-rank{
	width:34px; height:34px; border-radius:50%; flex:none;
	display:flex; align-items:center; justify-content:center;
	font-family:'Oswald',sans-serif; font-weight:700; color:#fff; background:var(--vp-navy-3);
}
.vp-rank.r1{ background:var(--vp-gold); color:var(--vp-navy); }
.vp-rank.r2{ background:#b9c1cc; color:var(--vp-navy); }
.vp-rank.r3{ background:#c9873f; color:#fff; }
.vp-scorer-goals{
	margin-left:auto; font-family:'Oswald',sans-serif; font-weight:700; font-size:1.1rem;
	color:var(--vp-navy); display:flex; align-items:center; gap:.35rem;
}

/* -------- cumpleaños / avisos festivos -------- */
.vp-birthday{
	background:linear-gradient(120deg, #fff7e0, #fff);
	border:1px solid #f3d98b; border-radius:var(--vp-radius);
	padding:1rem 1.3rem; display:flex; align-items:center; gap:1rem;
}
.vp-callout{
	display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
	background:#fff7e0; border:1px solid #f3d98b; border-radius:14px; padding:.9rem 1.1rem;
}

/* -------- filtros (selects/forms) -------- */
.vp-filters{
	background:#fff; border:1px solid var(--vp-line); border-radius:var(--vp-radius);
	padding:1.1rem 1.3rem; margin-bottom:2rem;
}
.vp-filters label{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--vp-muted); margin-bottom:.3rem; }
.vp-filters .form-select, .vp-filters .form-control{ border-radius:10px; border-color:var(--vp-line); }
.vp-filters .form-select:focus, .vp-filters .form-control:focus{ border-color:var(--vp-navy-3); box-shadow:0 0 0 .2rem rgba(25,58,107,.15); }

/* -------- quick links (tiles) -------- */
.vp-tile{
	background:#fff; border-radius:14px; padding:1.3rem 1rem; text-align:center;
	border:1px solid var(--vp-line); display:block; color:var(--vp-navy);
	transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	height:100%;
}
.vp-tile:hover{ transform:translateY(-4px); box-shadow:0 14px 26px rgba(10,25,48,.12); border-color:transparent; color:var(--vp-navy); }
.vp-tile .ic{
	width:52px; height:52px; border-radius:50%; margin:0 auto .6rem;
	display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff;
}
.vp-tile .lbl{ font-weight:600; font-size:.88rem; }

/* -------- tarjetas / contenido genérico -------- */
.vp-card{
	background:#fff; border:1px solid var(--vp-line); border-radius:var(--vp-radius); padding:1.5rem;
}
.vp-pagination .page-link{ color:var(--vp-navy); border-color:var(--vp-line); }
.vp-pagination .page-item.active .page-link{ background:var(--vp-navy); border-color:var(--vp-navy); }

/* -------- footer -------- */
.vp-footer{ background:var(--vp-navy); color:rgba(255,255,255,.75); padding:3.2rem 0 1.3rem; }
.vp-footer h6{ color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.06em; }
.vp-footer a{ color:rgba(255,255,255,.65); }
.vp-footer a:hover{ color:var(--vp-gold-2); }
.vp-memorial{
	display:flex; align-items:center; gap:.9rem;
	background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
	border-radius:14px; padding:.9rem 1.1rem; margin-top:1rem;
}
.vp-memorial img{
	width:52px; height:52px; border-radius:50%; background:#fff; object-fit:cover;
	border:2px solid var(--vp-gold);
}
.vp-memorial .txt{ font-size:.82rem; line-height:1.4; }
.vp-memorial .txt b{ color:#fff; }
hr.vp-hr{ border-color:rgba(255,255,255,.12); margin:2rem 0 1.2rem; }

/* -------- resultado (G/E/P) e ícono de tarjeta roja en línea -------- */
.vp-badge-resultado{
	font-family:'Oswald',sans-serif; font-weight:700; font-size:.78rem;
	padding:.25rem .6rem; border-radius:8px; flex:none; color:#fff;
}
.vp-badge-resultado.gano{ background:var(--vp-green); }
.vp-badge-resultado.empato{ background:var(--vp-gold); color:var(--vp-navy); }
.vp-badge-resultado.perdio{ background:#b23a48; }
.vp-card-roja{
	display:inline-block; width:9px; height:13px; border-radius:2px;
	background:#c0392b; margin:0 1px; vertical-align:middle;
}

/* -------- foto de perfil de jugador -------- */
.vp-player-photo{
	width:100%; max-width:220px; aspect-ratio:1/1; object-fit:cover; border-radius:var(--vp-radius);
	border:1px solid var(--vp-line); background:#fff;
}

/* -------- contadores de amonestaciones en tablas -------- */
.vp-pill-amarilla{
	background:#ffd54a; color:#664d03; font-weight:700; border-radius:6px;
	padding:.1rem .55rem; font-size:.8rem; display:inline-block;
}
.vp-pill-roja{
	background:#dc3545; color:#fff; font-weight:700; border-radius:6px;
	padding:.1rem .55rem; font-size:.8rem; display:inline-block;
}

/* -------- llaves de playoff (jQuery Bracket) -------- */
.vp-bracket-zona{
	font-family:'Oswald',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.04em;
	text-transform:uppercase; color:var(--vp-navy); margin-bottom:.6rem;
}
.vp-bracket-block{ overflow-x:auto; padding-bottom:.5rem; }
/* Selectores con .vp-bracket-block adelante para pesar más que css/jquery.bracket.min.css
   sin importar el orden en que se hayan cargado las dos hojas de estilo. */
.vp-bracket-block div.jQBracket{ font-family:'Inter',system-ui,sans-serif; font-size:13px; color:var(--vp-navy); }
.vp-bracket-block div.jQBracket .team{ background:#fff; border:1px solid var(--vp-line); }
.vp-bracket-block div.jQBracket .team:first-child{ border-bottom:1px solid var(--vp-line); }
.vp-bracket-block div.jQBracket .team div.label{ color:var(--vp-navy); font-weight:600; }
.vp-bracket-block div.jQBracket .team div.score{ background:rgba(10,25,48,.05); color:var(--vp-navy); font-weight:700; }
.vp-bracket-block div.jQBracket .team.win div.score{ color:var(--vp-green); }
.vp-bracket-block div.jQBracket .team.lose{ background:var(--vp-paper); color:var(--vp-muted); }
.vp-bracket-block div.jQBracket .team.lose div.score{ color:var(--vp-muted); }
.vp-bracket-block div.jQBracket .team.bye,
.vp-bracket-block div.jQBracket .team.np,
.vp-bracket-block div.jQBracket .team.na{ background:var(--vp-paper); color:var(--vp-muted); }
.vp-bracket-block div.jQBracket .connector,
.vp-bracket-block div.jQBracket .connector div.connector{ border-color:var(--vp-line); }
.vp-bracket-block div.jQBracket .team.highlightWinner{ background:var(--vp-gold); color:var(--vp-navy); }
.vp-bracket-block div.jQBracket .connector.highlightWinner,
.vp-bracket-block div.jQBracket .connector div.connector.highlightWinner{ border-color:var(--vp-gold); }
.vp-bracket-block div.jQBracket .win .bubble{ background:var(--vp-gold); color:var(--vp-navy); font-weight:700; }
.vp-bracket-block div.jQBracket .win .bubble:after{ border-right-color:var(--vp-gold); }
.vp-bracket-block div.jQBracket .win .bubble.third{ background:#c9873f; color:#fff; }
.vp-bracket-block div.jQBracket .win .bubble.third:after{ border-right-color:#c9873f; }
.vp-bracket-block div.jQBracket .lose .bubble{ background:var(--vp-line); color:var(--vp-muted); }
.vp-bracket-block div.jQBracket .lose .bubble:after{ border-right-color:var(--vp-line); }

/* -------- variante admin (mismo sistema, franja verde para no confundirla con el sitio público) -------- */
.vp-admin .vp-navbar{
	background:linear-gradient(180deg, var(--vp-green-dark) 0%, var(--vp-green) 100%);
}
.vp-admin .vp-brand-text span{ color:var(--vp-gold-2); }

/* Zebra_DatePicker (plugin viejo, año ~2013) mide el ancho del input al inicializarse y
   bajo el reset de Bootstrap 5 lo lee como ~0, dejando el wrapper achicado al ancho del
   ícono solo. Se fuerza el ancho acá porque no depende del orden de carga de los scripts. */
.Zebra_DatePicker_Icon_Wrapper{ width:100% !important; display:block !important; }
.Zebra_DatePicker_Icon_Wrapper input{ width:100% !important; }

@media (max-width:767px){
	.vp-hero h1{ font-size:2.1rem; }
	.vp-hero{ padding-bottom:8rem; }
	.vp-stats{ margin-top:-6rem; }
	.vp-hero-page{ padding-bottom:2.6rem; }
	.vp-stats.sm{ margin-top:0; }
}