:root {
  --client-navy: #071431;
  --client-green: #20a845;
  --client-green-700: #128337;
  --client-green-100: #e8f8ee;
  --client-red: #e14658;
  --client-red-100: #ffecef;
  --client-yellow: #f5b934;
  --client-yellow-100: #fff7df;
  --client-blue: #2f6df6;
  --client-blue-100: #eaf1ff;
  --client-gray: #607089;
  --client-gray-100: #f3f6fa;
  --client-border: #dce5ef;
  --client-shadow: 0 18px 45px rgba(15, 23, 42, .10);
  --client-radius: 20px;
}

* { box-sizing: border-box; }
body.client-body, body.client-login-body { margin: 0; color: var(--client-navy); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: linear-gradient(180deg, #f7fbf8, #eef4fb); }
body.client-body { min-height: 100vh; padding-bottom: 80px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.client-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; }
.client-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; min-height: 76px; margin: 12px 0 22px; padding: 12px; border: 1px solid var(--client-border); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(15,23,42,.06); backdrop-filter: blur(12px); }
.client-brand { display: flex; align-items: center; gap: 10px; font-weight: 950; }
.client-brand span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: var(--client-green); }
.client-brand strong,
.client-brand small { display: block; }
.client-brand small { color: #64748b; font-size: 12px; font-weight: 800; }
.client-nav { flex: 1; display: flex; justify-content: center; gap: 6px; }
.client-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 14px; color: var(--client-gray); font-size: 14px; font-weight: 900; }
.client-nav a.is-active, .client-nav a:hover { color: var(--client-green-700); background: var(--client-green-100); }
.client-user { display: flex; align-items: center; gap: 10px; }
.client-user span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: var(--client-navy); font-weight: 950; }
.client-user a { color: var(--client-gray); font-weight: 900; }

.client-content { padding-bottom: 26px; }
.client-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: 22px; align-items: stretch; margin-bottom: 22px; }
.client-hero-card, .client-panel, .client-card, .client-court-card { border: 1px solid var(--client-border); border-radius: var(--client-radius); background: #fff; box-shadow: var(--client-shadow); }
.client-hero-card { padding: clamp(24px, 4vw, 44px); background: linear-gradient(135deg, #fff, #f4fff7); }
.client-eyebrow { display: inline-flex; color: var(--client-green-700); font-weight: 950; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.client-hero h1, .client-page-head h1 { margin: 10px 0; font-size: clamp(32px, 5vw, 56px); line-height: .98; letter-spacing: -0.025em; }
.client-hero p, .client-page-head p, .client-panel p { color: var(--client-gray); font-weight: 650; line-height: 1.65; }
.client-hero-actions, .client-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.client-btn, .client-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 14px; border: 1px solid transparent; font-weight: 950; cursor: pointer; }
.client-btn { color: #fff; background: linear-gradient(135deg, var(--client-green), #2fc657); box-shadow: 0 14px 28px rgba(32,168,69,.22); }
.client-btn-secondary { background: #fff; border-color: var(--client-border); }
.client-hero-visual { overflow: hidden; min-height: 280px; border-radius: var(--client-radius); box-shadow: var(--client-shadow); }
.client-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

.client-page-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; margin-bottom: 18px; }
.client-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.client-card { padding: 18px; }
.client-card span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--client-green-700); background: var(--client-green-100); }
.client-card strong { display: block; margin-top: 14px; font-size: 28px; }
.client-card small { display: block; margin-top: 4px; color: var(--client-gray); font-weight: 750; }
.client-panel { padding: 20px; }
.client-workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 18px; align-items: start; margin-top: 18px; }

.client-table-wrap { overflow-x: auto; border: 1px solid var(--client-border); border-radius: 16px; background: #fff; }
.client-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.client-table th, .client-table td { padding: 14px; border-bottom: 1px solid var(--client-border); text-align: left; vertical-align: top; }
.client-table th { color: var(--client-gray); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: #f8fafc; }
.client-table td { font-weight: 750; }
.client-table small { display: block; color: var(--client-gray); margin-top: 4px; }
.client-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 950; }
.client-badge--ok { color: #127531; background: var(--client-green-100); }
.client-badge--pending { color: #996500; background: var(--client-yellow-100); }
.client-badge--bad { color: #b91c35; background: var(--client-red-100); }
.client-badge--info { color: #2357cc; background: var(--client-blue-100); }

.client-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.client-field { display: grid; gap: 7px; }
.client-field label, .client-login-card label { font-weight: 950; font-size: 13px; }
.client-field input, .client-field select, .client-field textarea, .client-login-card input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--client-border); border-radius: 14px; outline: 0; background: #fff; }
.client-field textarea { min-height: 96px; resize: vertical; }
.client-field--full { grid-column: 1 / -1; }
.client-alert { margin-bottom: 16px; padding: 14px 16px; border-radius: 14px; font-weight: 850; border: 1px solid var(--client-border); background: #fff; }
.client-alert--success { color: var(--client-green-700); background: var(--client-green-100); border-color: #b9ecc8; }
.client-alert--error { color: #a80f24; background: var(--client-red-100); border-color: #ffc1ca; }

.client-courts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.client-court-card { overflow: hidden; }
.client-court-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.client-court-card div { padding: 16px; }
.client-court-card h3 { margin: 0 0 8px; }
.client-court-card p { margin: 0; color: var(--client-gray); line-height: 1.5; }
.client-gallery { display: grid; gap: 10px; }
.client-gallery-main { width: 100%; height: 320px; object-fit: cover; border-radius: 18px; border: 1px solid var(--client-border); }
.client-gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.client-gallery-thumbs img { width: 100%; height: 72px; object-fit: cover; border-radius: 12px; cursor: pointer; border: 2px solid transparent; }
.client-gallery-thumbs img.is-active { border-color: var(--client-green); }

.client-map-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; align-items: start; }
.client-map-card { padding: 12px; border: 1px solid var(--client-border); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--client-shadow); }
.client-map { position: relative; overflow: hidden; border-radius: 20px; background: #dfe9ec; aspect-ratio: 1672 / 941; isolation: isolate; }
.client-map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.client-map-hotspots { position: absolute; inset: 0; z-index: 2; }
.client-map-help { margin: 10px 4px 2px; color: var(--client-gray); font-weight: 850; font-size: 13px; }
.client-hotspot { appearance: none; position: absolute; width: 34px; height: 34px; padding: 0; border: 2px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(32,168,69,.12); cursor: pointer; outline: none; transform: translate(-50%, -50%); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.client-hotspot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 999px; background: #fff; border: 4px solid var(--client-green); box-shadow: 0 0 0 7px rgba(32,168,69,.18); transform: translate(-50%, -50%); }
.client-hotspot[data-type="voley"] { background: rgba(220,38,38,.10); }
.client-hotspot[data-type="voley"]::after { border-color: #dc2626; box-shadow: 0 0 0 7px rgba(220,38,38,.16); }
.client-hotspot[data-type="evento"] { background: rgba(37,99,235,.10); }
.client-hotspot[data-type="evento"]::after { border-color: #2563eb; box-shadow: 0 0 0 7px rgba(37,99,235,.16); }
.client-hotspot[data-status="reservado"]::after { border-color: #dc2626; box-shadow: 0 0 0 7px rgba(220,38,38,.16); }
.client-hotspot[data-status="pendiente"]::after { border-color: #f59e0b; box-shadow: 0 0 0 7px rgba(245,158,11,.18); }
.client-hotspot[data-status="bloqueado"]::after { border-color: #64748b; box-shadow: 0 0 0 7px rgba(100,116,139,.16); }
.client-hotspot[data-status="evento"]::after { border-color: #2563eb; box-shadow: 0 0 0 7px rgba(37,99,235,.16); }
.client-hotspot:hover, .client-hotspot:focus-visible, .client-hotspot.is-active { transform: translate(-50%, -50%) scale(1.08); border-color: rgba(32,168,69,.85); background: rgba(32,168,69,.20); box-shadow: 0 0 0 5px rgba(32,168,69,.15), 0 18px 34px rgba(7,20,49,.18); }
.client-panel-status { width: fit-content; display: inline-flex; margin-bottom: 8px; padding: 7px 10px; border-radius: 999px; color: var(--client-green-700); background: var(--client-green-100); font-size: 12px; font-weight: 950; }

.client-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; }
.client-slot { min-height: 40px; border: 1px solid var(--client-border); border-radius: 12px; background: #fff; font-weight: 950; cursor: pointer; }
.client-slot:hover, .client-slot.is-active { color: #fff; background: var(--client-green); border-color: var(--client-green); }
.client-slot.is-blocked { color: var(--client-gray); background: #eef2f7; cursor: not-allowed; }
.client-slot-option { position: relative; display: grid; place-items: center; min-height: 44px; border: 1px solid var(--client-border); border-radius: 12px; background: #fff; color: var(--client-navy); font-weight: 950; cursor: pointer; }
.client-slot-option input { position: absolute; opacity: 0; pointer-events: none; }
.client-slot-option:has(input:checked) { color: #fff; background: var(--client-green); border-color: var(--client-green); }
.client-slot-option.is-disabled { color: var(--client-gray); background: #eef2f7; cursor: not-allowed; }
.client-booking-form { display: grid; gap: 18px; margin-top: 22px; }
.client-booking-summary { margin-top: 4px; padding: 16px; border: 1px solid var(--client-border); border-radius: 16px; background: #f8fafc; }
.client-booking-summary dl { display: grid; gap: 10px; margin: 0; }
.client-booking-summary div { display: flex; justify-content: space-between; gap: 12px; }
.client-booking-summary dt { color: var(--client-gray); font-weight: 850; }
.client-booking-summary dd { margin: 0; font-weight: 950; text-align: right; }
.client-booking-yape { padding: 16px; border: 1px solid #b9ecc8; border-radius: 18px; background: var(--client-green-100); }
.client-booking-yape img { display: block; width: min(240px, 100%); aspect-ratio: 1; object-fit: contain; margin-top: 12px; border-radius: 16px; border: 1px solid var(--client-border); background: #fff; }
.client-booking-qr-empty { display: grid; place-items: center; min-height: 160px; margin-top: 12px; border: 1px dashed var(--client-border); border-radius: 16px; background: #fff; color: var(--client-gray); font-weight: 850; text-align: center; }
.client-booking-success h2 { margin-bottom: 6px; }

.client-module-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.client-module-tabs a { min-height: 40px; padding: 0 13px; border: 1px solid var(--client-border); border-radius: 999px; display: inline-flex; align-items: center; color: var(--client-gray); background: #fff; font-size: 13px; font-weight: 950; }
.client-module-tabs a.is-active, .client-module-tabs a:hover { color: var(--client-green-700); background: var(--client-green-100); border-color: #b9ecc8; }
.client-tournament-hero, .client-bracket-shell { border: 1px solid var(--client-border); border-radius: 24px; background: #fff; box-shadow: var(--client-shadow); }
.client-tournament-hero { margin-bottom: 18px; padding: 22px; display: flex; justify-content: space-between; gap: 18px; align-items: center; background: radial-gradient(circle at top right, rgba(32,168,69,.15), transparent 34%), linear-gradient(135deg, #fff, #f5fbff); }
.client-tournament-hero h2 { margin: 10px 0 6px; font-size: clamp(26px, 4vw, 42px); line-height: 1; }
.client-tournament-hero p { margin: 0; color: var(--client-gray); font-weight: 750; line-height: 1.55; }
.client-tournament-stats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.client-tournament-stats span { min-width: 104px; padding: 12px; border: 1px solid var(--client-border); border-radius: 16px; display: grid; gap: 2px; background: rgba(255,255,255,.78); color: var(--client-gray); font-size: 11px; font-weight: 950; text-transform: uppercase; }
.client-tournament-stats strong { color: var(--client-navy); font-size: 20px; text-transform: none; }
.client-tournament-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.client-tournament-summary div { padding: 12px; border: 1px solid var(--client-border); border-radius: 14px; background: #f8fafc; }
.client-tournament-summary strong, .client-tournament-summary span { display: block; }
.client-tournament-summary strong { color: var(--client-gray); font-size: 12px; }
.client-tournament-summary span { margin-top: 4px; font-weight: 950; }
.client-team-list { display: grid; gap: 10px; }
.client-team-list--grid { margin: 16px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-team-chip { padding: 10px; border: 1px solid var(--client-border); border-radius: 16px; display: flex; align-items: center; gap: 10px; background: #f8fafc; }
.client-team-chip > span { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; color: var(--client-green-700); background: var(--client-green-100); font-size: 12px; font-weight: 950; }
.client-team-chip strong, .client-team-chip small { display: block; }
.client-team-chip small { margin-top: 3px; color: var(--client-gray); font-weight: 750; }
.client-bracket-shell { padding: 18px; overflow-x: auto; background: radial-gradient(circle at top right, rgba(47,109,246,.12), transparent 30%), #fff; }
.client-bracket { min-width: 980px; display: flex; gap: 26px; align-items: stretch; }
.client-bracket-round { min-width: 220px; display: grid; align-content: center; gap: 18px; position: relative; }
.client-bracket-round h2 { margin: 0; font-size: 14px; text-transform: uppercase; color: var(--client-navy); }
.client-bracket-match { position: relative; padding: 10px; border: 1px solid var(--client-border); border-radius: 18px; background: #fbfdff; box-shadow: 0 10px 24px rgba(15,23,42,.06); }
.client-bracket-match::after { content: ""; position: absolute; top: 50%; right: -27px; width: 27px; height: 1px; background: #bdd0e6; }
.client-bracket-round:last-child .client-bracket-match::after { display: none; }
.client-bracket-match > div { min-height: 38px; padding: 9px 10px; border-radius: 12px; display: flex; justify-content: space-between; gap: 10px; align-items: center; background: #fff; font-size: 13px; font-weight: 950; }
.client-bracket-match > div + div { margin-top: 7px; }
.client-bracket-match > div.is-winner { color: var(--client-green-700); background: var(--client-green-100); box-shadow: inset 4px 0 0 var(--client-green); }
.client-bracket-match small { display: block; margin-top: 8px; color: var(--client-gray); font-size: 11px; font-weight: 850; }
.client-bracket-match.is-empty { opacity: .7; border-style: dashed; }
.client-bracket-champion { min-width: 250px; }
.client-bracket-match--champion { border-color: #b9ecc8; background: linear-gradient(135deg, #f0fbf4, #fff); }
.client-result-form { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.client-result-form input { width: 74px; min-height: 36px; padding: 0 9px; border: 1px solid var(--client-border); border-radius: 10px; }
.client-result-form input[name="notes"] { width: 180px; }

.client-login-body { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.client-login-card { width: min(520px, 100%); padding: clamp(28px, 5vw, 54px); border: 1px solid var(--client-border); border-radius: 30px; background: #fff; box-shadow: var(--client-shadow); }
.client-login-card > span { display: inline-flex; padding: 9px 14px; border-radius: 999px; color: var(--client-green-700); background: var(--client-green-100); font-weight: 950; }
.client-login-card h1 { margin: 18px 0 8px; font-size: clamp(36px, 7vw, 58px); line-height: 1; }
.client-login-card p { color: var(--client-gray); font-weight: 700; line-height: 1.6; }
.client-login-card form { display: grid; gap: 14px; margin-top: 18px; }
.client-login-card label { display: grid; gap: 7px; }
.client-login-card button { min-height: 50px; border: 0; border-radius: 15px; color: #fff; background: var(--client-green); font-weight: 950; cursor: pointer; }
.client-login-card small { color: var(--client-gray); font-weight: 750; }
.client-auth-link { display: inline-flex; justify-content: center; color: var(--client-green-700); font-weight: 950; }

.client-bottom-nav { display: none; }

@media (max-width: 980px) {
  .client-nav { display: none; }
  .client-hero, .client-workspace, .client-map-grid { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-courts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  body.client-body { padding-bottom: 86px; }
  .client-shell { width: min(100% - 20px, 1180px); }
  .client-topbar { border-radius: 18px; }
  .client-brand strong,
  .client-brand small { display: none; }
  .client-page-head { display: block; }
  .client-grid, .client-courts-grid, .client-form-grid { grid-template-columns: 1fr; }
  .client-btn, .client-btn-secondary { width: 100%; }
  .client-tournament-hero { align-items: flex-start; flex-direction: column; }
  .client-tournament-stats, .client-tournament-summary, .client-team-list--grid { grid-template-columns: 1fr; width: 100%; }
  .client-tournament-stats span { flex: 1 1 100%; }
  .client-bottom-nav { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px; border: 1px solid var(--client-border); border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: var(--client-shadow); backdrop-filter: blur(12px); }
  .client-bottom-nav a { display: grid; place-items: center; gap: 3px; color: var(--client-gray); font-size: 11px; font-weight: 900; }
  .client-bottom-nav a.is-active { color: var(--client-green-700); }
  .client-bottom-nav svg { width: 19px; height: 19px; }
}