/* ===========================================================================
   Zuia · Orden de Mérito — Leaderboard (Diseño A)
   =========================================================================== */
.zom-board {
	--zom-green: #0f5132;
	--zom-green-2: #14794a;
	--zom-blue: #0f3d6b;       /* dark-blue de la web */
	--zom-blue-2: #1e5ba8;     /* primary-blue de la web */
	--zom-gold: #d4af37;
	--zom-gold-soft: #f6e7b2;
	--zom-ink: #16241c;
	--zom-muted: #6b7c72;
	--zom-line: #e3e9e5;
	--zom-bg: #ffffff;

	max-width: 920px;
	margin: 0 auto;
	color: var(--zom-ink);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Cabecera ---------- */
.zom-board__head {
	display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
	padding: 26px 28px;
	background: linear-gradient(135deg, var(--zom-blue) 0%, var(--zom-blue-2) 100%);
	color: #fff; border-radius: 16px 16px 0 0;
	position: relative; overflow: hidden;
}
.zom-board__head::after {
	content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px;
	background: radial-gradient(circle, rgba(201,169,97,.40), transparent 70%);
}
.zom-board__club { margin: 0 0 2px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.zom-board__title { margin: 0; font-size: 24px; line-height: 1.1; font-weight: 800; }
.zom-board__sub { margin: 6px 0 0; font-size: 13px; opacity: .85; }
.zom-board__year { position: relative; z-index: 1; }
.zom-year-form label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-bottom: 4px; }
.zom-year-form select {
	background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4);
	border-radius: 8px; padding: 6px 10px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.zom-year-form select option { color: #16241c; }

/* ---------- Leyenda ---------- */
.zom-legend {
	display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 28px;
	background: #f7faf8; border-bottom: 1px solid var(--zom-line);
	font-size: 12px; color: var(--zom-muted);
}
.zom-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.zom-dot--cut { background: var(--zom-gold); }
.zom-dot--best { background: var(--zom-green-2); }
.zom-dot--ret { background: #c0392b; }

/* ---------- Lista ---------- */
.zom-list { list-style: none; margin: 0; padding: 0; background: var(--zom-bg); border-radius: 0 0 16px 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(15,81,50,.10); }

.zom-row { border-bottom: 1px solid var(--zom-line); opacity: 0; transform: translateY(10px); }
.zom-board.is-visible .zom-row { animation: zomIn .5s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--zom-delay, 0s); }
@keyframes zomIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.zom-row { opacity: 1; transform: none; }
	.zom-board.is-visible .zom-row { animation: none; }
}

.zom-row.is-interclubs { background: linear-gradient(90deg, rgba(212,175,55,.10), transparent 60%); }
.zom-row.is-podium .zom-row__name { font-weight: 800; }

.zom-row__main {
	width: 100%; display: grid; grid-template-columns: 54px 1fr auto 28px; align-items: center; gap: 12px;
	background: none; border: 0; cursor: pointer; text-align: left; padding: 14px 20px; font: inherit; color: inherit;
}
.zom-row__main:hover { background: rgba(15,81,50,.04); }
.zom-row__main:focus-visible { outline: 2px solid var(--zom-green-2); outline-offset: -2px; }

.zom-row__pos { font-size: 18px; font-weight: 800; color: var(--zom-green); text-align: center; }
.zom-medal { font-size: 22px; }
.zom-row__name { display: block; font-size: 16px; font-weight: 600; }
.zom-row__meta { display: block; font-size: 12px; color: var(--zom-muted); margin-top: 2px; }
.zom-tag {
	display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
	background: var(--zom-gold-soft); color: #7a5c00; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.zom-row__total { text-align: right; }
.zom-row__points { display: block; font-size: 22px; font-weight: 800; color: var(--zom-green); font-variant-numeric: tabular-nums; }
.zom-row__gap { display: block; font-size: 11px; color: var(--zom-muted); }
.zom-row__chev { color: var(--zom-muted); transition: transform .25s ease; text-align: center; }
.zom-row.is-open .zom-row__chev { transform: rotate(180deg); }

/* ---------- Línea de corte ---------- */
.zom-cutline {
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 8px 12px; background: linear-gradient(90deg, transparent, rgba(212,175,55,.22), transparent);
	border-top: 1px dashed var(--zom-gold); border-bottom: 1px dashed var(--zom-gold);
}
.zom-cutline span { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a6d00; }

/* ---------- Detalle expandible ---------- */
.zom-row__detail { padding: 4px 20px 18px; background: #fbfdfc; }
.zom-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; margin-top: 6px; }
.zom-cell {
	border: 1px solid var(--zom-line); border-radius: 8px; padding: 6px 4px; text-align: center; background: #fff;
}
.zom-cell__comp { display: block; font-size: 10px; color: var(--zom-muted); text-transform: uppercase; letter-spacing: .03em; }
.zom-cell__pts { display: block; font-size: 16px; font-weight: 700; margin-top: 2px; }
.zom-cell.is-best { border-color: var(--zom-green-2); background: rgba(20,121,74,.08); }
.zom-cell.is-best .zom-cell__pts { color: var(--zom-green-2); }
.zom-cell.is-ret .zom-cell__pts { color: #c0392b; font-size: 13px; }
.zom-cell.is-empty { opacity: .5; }
.zom-cell.is-empty .zom-cell__pts { color: var(--zom-muted); }
.zom-detail-foot { margin: 12px 0 0; font-size: 13px; color: var(--zom-muted); }
.zom-detail-foot strong { color: var(--zom-green); }

/* ---------- Estados ---------- */
.zom-empty, .zom-board__nodata { padding: 40px 24px; text-align: center; color: var(--zom-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
	.zom-board__title { font-size: 20px; }
	.zom-row__main { grid-template-columns: 40px 1fr auto 22px; gap: 8px; padding: 12px 14px; }
	.zom-row__points { font-size: 19px; }
	.zom-row__name { font-size: 15px; }
	.zom-legend { padding: 10px 14px; gap: 10px; }
}