/* Dashboard de ligas: dos columnas en escritorio, apilado en móvil */
@media (min-width: 900px) {
  #league-dashboard-grid {
    display: flex !important;
    gap: 2rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
  }
  #league-rankings-block {
    flex: 1;
    min-width: 0;
  }
  .dashboard-league-column-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  #league-results-block,
  #league-upcoming-block {
    width: 100%;
  }
  .dashboard-league-block {
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
  }
}
/* Asegura bloques apilados y 100% ancho en dashboard de ligas */
@media (max-width: 1200px) {
  .dashboard-league-block {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.2rem 0 !important;
    display: block !important;
  }
}
@media (max-width: 600px) {
  .dashboard-league-block {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1rem 0 !important;
    display: block !important;
  }
  .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.7rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* Forzar apilado vertical absoluto de columnas en móvil */
@media (max-width: 600px) {
  .dashboard-grid,
  .card-collection,
  .league-ranking-group__categories,
  .league-enrolled-list,
  .list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .card,
  .collection-card,
  .league-ranking-group,
  .league-enrolled-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}
/* Apilar secciones y columnas en móvil */
@media (max-width: 600px) {
  .dashboard-grid,
  .card-collection,
  .league-ranking-group__categories,
  .league-enrolled-list,
  .list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
}
/* Responsive: cada sección ocupa todo el ancho en móvil */
@media (max-width: 600px) {
  .app-section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box;
  }
  .card {
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .card-header,
  .card .card-header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
/* Responsive: Dashboard de ligas en móvil */
@media (max-width: 600px) {
  #section-league-dashboard .card {
    padding: 0.5rem 0.2rem;
    border-radius: 0;
    box-shadow: none;
  }
  .dashboard-metrics {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .dashboard-highlight {
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.7rem 0.3rem;
  }
  .metric-card {
    padding: 0.7rem 0.5rem;
  }
  .card-header h3 {
    font-size: 1.1rem;
  }
  
  /* Eliminar min-widths que causan overflow */
  .bracket-round,
  .card,
  .collection-card {
    min-width: 0 !important;
  }
}
.tournament-poster-popup-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInBg 0.2s;
}
.tournament-poster-popup-img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.25);
  background: #fff;
  animation: fadeInImg 0.2s;
}
@keyframes fadeInBg {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInImg {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Responsive: Headers y avatar en móvil */

@media (max-width: 768px) {
}
/* Errores de campos de configuración */
:root {
  color-scheme: light;
  font-family: 'Urbanist', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --bg-primary: #f5f6fa;
  --bg-secondary: #edf1f7;
  --card-bg: #ffffff;
  --card-border: rgba(148, 163, 184, 0.25);
  --card-shadow: none;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --accent: #1d4ed8;
  --accent-soft: #e0e7ff;
  --accent-strong: #1e3a8a;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #0ea5e9;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --focus-ring: 2px solid rgba(29, 78, 216, 0.35);
}

/* Logo sin efectos y tamaño fijo */
#auth-club-logo,
#header-club-logo,
#mobile-club-logo {
  width: 112px !important;
  height: 112px !important;
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0 !important;
  box-shadow: none !important;
}

* {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-shadow: none !important;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

html {
  font-size: 90%;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.1;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

/* Loader global personalizado */
.global-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.global-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Loader plano: pelota que bota y gira, sombra sólida y barra de progreso */
.global-loader {
  background: #f4f6fb;
}

.global-loader__court {
  position: relative;
  width: 88px;
  height: 104px;
}

.global-loader__ball {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  transform-origin: 50% 100%;
  animation: loaderBallBounce 0.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.global-loader__ball svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: loaderBallSpin 1.6s linear infinite;
}

.global-loader__shadow {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 44px;
  height: 6px;
  margin-left: -22px;
  border-radius: 999px;
  background: #e1e6f2;
  animation: loaderBallShadow 0.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.global-loader__bar {
  position: relative;
  width: 120px;
  height: 4px;
  margin: 1.1rem 0 0.9rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e1e6f2;
}

.global-loader__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 999px;
  background: #3554f0;
  animation: loaderBar 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.global-loader__text {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6b7491;
}

@keyframes loaderBallBounce {
  0%, 100% { transform: translateY(0) scale(1.1, 0.9); }
  10% { transform: translateY(-6px) scale(0.97, 1.03); }
  50% { transform: translateY(-46px) scale(1, 1); }
  90% { transform: translateY(-6px) scale(0.97, 1.03); }
}

@keyframes loaderBallSpin {
  to { transform: rotate(360deg); }
}

@keyframes loaderBallShadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.5); opacity: 0.5; }
}

@keyframes loaderBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .global-loader__ball,
  .global-loader__shadow {
    animation: none;
  }

  .global-loader__ball svg,
  .global-loader__bar span {
    animation-duration: 3s;
  }
}

@keyframes spinLoader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Prevenir scroll mientras carga */
body.loading {
  overflow: hidden;
}

body.loading::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.loading::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border: 4px solid var(--card-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 10000;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.auth-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem 3rem;
  position: relative;
  z-index: 1;
  background: var(--bg-primary);
}

.auth-view[hidden],
.auth-view.is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.auth-card {
  width: min(460px, 100%);
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2.25rem;
  border: 1px solid var(--card-border);
}

.auth-header h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(2.1rem, 4vw, 2.6rem);
}

.auth-header p {
  margin: 0 0 1.75rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.tab-button {
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.tab-button:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.tab-button.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.tab-pane {
  animation: fade 0.3s ease;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form {
  display: grid;
  gap: 1rem;
}

label {
  display: grid;
  gap: 0.4rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.color-select {
  margin: 0;
  padding: 0.75rem 0.9rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: #ffffff;
  display: grid;
  gap: 0.75rem;
}

.color-select legend {
  margin: 0;
  padding: 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.color-select-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.color-select-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 500;
}

.color-select-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.color-select-option .color-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 2px solid var(--card-bg);
  outline: 1px solid var(--card-border);
  outline-offset: -2px;
  background-color: var(--option-color);
  transition: transform 0.2s ease, outline-color 0.2s ease, border-color 0.2s ease;
}

.color-select-option input:checked + .color-swatch {
  border-color: var(--accent);
  outline-color: var(--accent);
  transform: scale(1.05);
}

.color-select-option input:focus-visible + .color-swatch {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

input,
select,
textarea {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-primary);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: var(--focus-ring);
  outline-offset: 2px;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.category-colored {
  --category-color: #2563eb;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.category-color-indicator {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background-color: var(--category-color, #2563eb);
  border: 2px solid var(--card-bg);
  outline: 1px solid var(--card-border);
  outline-offset: -1px;
  flex-shrink: 0;
}

.with-category-color {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.list li strong.with-category-color,
.calendar-event strong.with-category-color {
  display: flex;
}

.calendar-event .category-color-indicator {
  width: 0.55rem;
  height: 0.55rem;
  border-width: 2px;
}

.form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.form-hint {
  margin: -0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.form-hint.error {
  color: var(--danger);
}

.form-hint.match-format-hint {
  margin: 0 0 1.5rem;
  display: block;
  padding: 0.75rem 1rem;
  background: #f0f4ff;
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.court-reservation-participants {
  margin-top: 0.25rem;
}

/* Estilos para registro de resultados de torneos */
.match-results-section {
  margin: 1.5rem 0;
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #f9fafb;
}

.match-results-header {
  display: grid;
  grid-template-columns: minmax(150px, 2.5fr) repeat(var(--set-count, 3), minmax(60px, 1fr));
  gap: 0.75rem;
  padding: 1rem 1rem;
  background: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  border-bottom: none;
  text-align: center;
}

.match-results-row {
  display: grid;
  grid-template-columns: minmax(150px, 2.5fr) repeat(var(--set-count, 3), minmax(60px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: #fff;
}

.match-results-row:last-child {
  border-bottom: none;
}

.player-info {
  display: flex;
  align-items: center;
}

.player-name-input {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
  overflow-x: auto;
  white-space: nowrap;
  min-width: 0;
}

.set-input {
  width: 100%;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.6rem 0.5rem;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  transition: all 0.2s ease;
}

.set-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: #fafbff;
}

.set-input.winner-set {
  background: #dbeafe;
  border-color: var(--accent);
  color: var(--accent);
}

.calculated-winner {
  padding: 0.75rem 1rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  text-align: center;
}

.calculated-winner .winner-name {
  font-weight: 700;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  margin-top: 0.25rem;
  cursor: pointer;
}

.checkbox-label span {
  flex: 1;
}

.walkover-winner-section {
  padding: 1rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
}

.court-reservation-participants label.inline-field {
  min-width: 0;
}

.form-section {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.form-section:first-of-type {
  margin-top: 0;
}

.form-section__header {
  display: grid;
  gap: 0.15rem;
}

.form-section__header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.club-editor {
  display: grid;
  gap: 0.75rem;
}

.club-editor__list {
  display: grid;
  gap: 0.75rem;
}

.club-editor__item {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.club-editor__item textarea {
  min-height: 72px;
}

.club-editor__empty {
  margin: 0;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(148, 163, 184, 0.55);
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.club-editor__footer {
  display: flex;
  justify-content: flex-start;
}

.club-editor__footer > * + * {
  margin-left: 0.5rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.form-actions--inline {
  justify-content: flex-start;
}

button {
  font: inherit;
  border: none;
  cursor: pointer;
}

button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.primary {
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.primary:hover {
  background: var(--accent-strong);
}

.secondary {
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.secondary:hover,
.secondary:focus-visible {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-strong);
}

.profile-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b6b, #f0483a);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(240, 72, 58, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.profile-edit-btn svg {
  flex-shrink: 0;
}

.profile-edit-btn:hover,
.profile-edit-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(240, 72, 58, 0.45);
  filter: brightness(1.05);
}

.profile-edit-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(240, 72, 58, 0.35);
}

.ghost {
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--card-border);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ghost:hover,
.ghost:focus-visible {
  background: var(--bg-secondary);
  border-color: transparent;
  color: var(--accent-strong);
}

.danger {
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--danger);
  border: none;
  color: white;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.danger:hover,
.danger:focus-visible {
  background: #dc2626;
}

.success {
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--success);
  border: none;
  color: #ffffff;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.success:hover,
.success:focus-visible {
  background: #15803d;
}

.danger {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--danger);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.danger:hover,
.danger:focus-visible {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
}

.status-message {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}

.status-message.show,
.status-message.success,
.status-message.error,
.status-message.info {
  display: block;
}

.status-message.success {
  background: rgba(22, 163, 74, 0.12);
  color: var(--success);
}

.status-message.error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.status-message.info {
  background: rgba(14, 165, 233, 0.12);
  color: var(--info);
}

.banner {
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-sm);
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent-strong);
  display: none;
}

.banner.show {
  display: block;
}

.banner.error {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.banner.success {
  background: rgba(22, 163, 74, 0.12);
  color: var(--success);
}

.install-prompt {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 120;
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
}

.install-prompt__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
}

.install-prompt__text {
  display: grid;
  gap: 0.35rem;
}

.install-prompt__title {
  margin: 0;
  font-size: 1.1rem;
}

.install-prompt__text p {
  margin: 0;
  color: var(--text-secondary);
}

.install-prompt__instructions {
  font-size: 0.95rem;
}

.install-prompt__instructions strong {
  color: var(--text-primary);
}

.install-prompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .install-prompt {
    left: auto;
    width: min(420px, calc(100% - 2rem));
    right: 2rem;
    bottom: 2rem;
  }

  .install-prompt__content {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
  }

  .install-prompt__text {
    flex: 1;
  }

  .install-prompt__actions {
    justify-content: flex-end;
  }
}

.app-view {
  background: var(--bg-primary);
  min-height: 100vh;
  position: relative;
  z-index: 2;
  overflow-x: hidden;
  max-width: 100%;
}

.app-view[hidden],
.app-view.is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

.mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  position: static;
  top: auto;
  z-index: 30;
}

.mobile-topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mobile-menu-toggle__icon {
  position: relative;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.mobile-menu-toggle__icon::before,
.mobile-menu-toggle__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.2s ease;
}

.mobile-menu-toggle__icon::before {
  transform: translateY(-6px);
}

.mobile-menu-toggle__icon::after {
  transform: translateY(6px);
}

.mobile-menu-toggle:hover {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.mobile-menu-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 25;
}

.mobile-menu-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-close {
  display: none;
  align-self: flex-end;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0.35rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  margin-bottom: 0.25rem;
}

.mobile-menu-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.mobile-menu-close:hover {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.mobile-menu-close__icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.mobile-menu-close__icon::before,
.mobile-menu-close__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.mobile-menu-close__icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-close__icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

body.mobile-menu-open {
  overflow: hidden;
}

body.mobile-menu-open .mobile-menu-toggle__icon {
  background: transparent;
}

body.mobile-menu-open .mobile-menu-toggle__icon::before {
  transform: translateY(0) rotate(45deg);
}

body.mobile-menu-open .mobile-menu-toggle__icon::after {
  transform: translateY(0) rotate(-45deg);
}

.app-header {
  position: static;
  top: auto;
  z-index: 40;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  transition: transform 0.3s ease;
}

.app-header__inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.75rem clamp(1.5rem, 3vw, 3rem);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.app-switcher {
  --switcher-padding: 0.22rem;
  --active-index: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: var(--switcher-padding);
  min-width: 192px;
  background: linear-gradient(180deg, #eef2f8 0%, #e2e8f0 100%);
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  isolation: isolate;
}

.app-switcher::before {
  content: '';
  position: absolute;
  top: var(--switcher-padding);
  bottom: var(--switcher-padding);
  left: var(--switcher-padding);
  width: calc((100% - var(--switcher-padding) * 2) / 2);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.24);
  transform: translateX(calc(var(--active-index) * 100%));
  transition: transform 0.25s ease;
  z-index: 0;
}

.app-switcher__button {
  position: relative;
  z-index: 1;
  min-width: 0;
  justify-content: center;
  padding: 0.58rem 0.9rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

/* Asegura que el switcher recorta cualquier desbordamiento visual del SVG */
.app-switcher { overflow: hidden; }

/* Iconos en switcher */
.app-switcher__icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(23%) sepia(88%) saturate(1742%) hue-rotate(206deg) brightness(92%) contrast(95%);
}

.app-switcher__label {
  display: inline-block;
  line-height: 1;
}

.app-switcher__button--active .app-switcher__icon {
  filter: none; /* usa colores originales cuando activo */
}

.app-switcher__button:hover {
  color: var(--accent-strong);
}

.app-switcher__button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.app-switcher__button--active {
  color: var(--accent-strong);
  font-weight: 700;
}

.main-menu {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.main-menu[hidden] {
  display: none !important;
}

.main-menu__list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu__list--mobile-footer {
  display: none;
}

.app-header__actions {
  margin-left: 0;
  display: flex;
  align-items: center;
}

.app-header__utility {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-icon-button,
.mobile-topbar__avatar-button,
.topbar-account-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.82);
  color: #1f2937;
  border-radius: 18px;
  min-width: 52px;
  min-height: 52px;
  padding: 0.75rem;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  backdrop-filter: blur(12px);
}

.topbar-icon-button:hover,
.mobile-topbar__avatar-button:hover,
.topbar-account-chip:hover,
.topbar-icon-button:focus-visible,
.mobile-topbar__avatar-button:focus-visible,
.topbar-account-chip:focus-visible {
  background: #ffffff;
  border-color: rgba(29, 78, 216, 0.2);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.topbar-icon-button svg {
  width: 22px;
  height: 22px;
}

.topbar-icon-button--danger {
  color: #64748b;
}

.topbar-icon-button--danger:hover,
.topbar-icon-button--danger:focus-visible {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.18);
}

.topbar-account-chip {
  min-width: auto;
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
}

.mobile-topbar__avatar-button {
  min-width: auto;
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
}

.topbar-account-chip__avatar,
.mobile-topbar__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e8eef7;
  background-image: url('avatar-default.svg');
  background-size: 85%;
  background-position: center 60%;
  background-repeat: no-repeat;
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
  display: block;
}

.notification-bell__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.28);
}

.mobile-topbar__actions {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  margin-right: 0.65rem;
}

.notification-popover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(2px);
  z-index: 54;
}

.notification-popover {
  position: fixed;
  top: 6rem;
  right: 1.5rem;
  width: min(520px, calc(100vw - 2rem));
  max-height: min(70vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  z-index: 55;
}

.notification-popover__header,
.notification-popover__footer {
  padding: 1.1rem 1.25rem;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.notification-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.notification-popover__header h3 {
  margin: 0;
  font-size: 1.45rem;
}

.notification-popover__header p {
  margin: 0.3rem 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.notification-popover__content {
  overflow: auto;
  padding: 0.35rem 0;
}

.notification-popover__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notification-popover__item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  display: grid;
  gap: 0.55rem;
}

.notification-popover__item--read {
  background: rgba(248, 250, 252, 0.72);
}

.notification-popover__eyebrow {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.notification-popover__eyebrow--unread {
  color: #7c3aed;
}

.notification-popover__eyebrow--read {
  color: #0f766e;
}

.notification-popover__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--text-primary);
}

.notification-popover__message,
.notification-popover__meta {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.45;
}

.notification-popover__meta {
  font-size: 0.92rem;
}

.notification-popover__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.notification-popover__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.notification-popover__open {
  border: none;
  background: transparent;
  color: var(--accent-strong);
  font-weight: 700;
  padding: 0;
  cursor: pointer;
}

.notification-popover__empty {
  margin: 1rem 1.25rem;
}

.main-menu__item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.menu-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

.menu-group--expanded > .menu-button {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: transparent;
}

.menu-submenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 220px;
  padding: 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  display: grid;
  gap: 0.3rem;
  z-index: 45;
}

.menu-submenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

.menu-account-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #e8eef7;
  background-image: url('avatar-default.svg');
  background-size: 85%;
  background-position: center 60%;
  background-repeat: no-repeat;
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
  flex-shrink: 0;
}

.menu-mobile-footer-item {
  display: none;
}

.menu-button--mobile-user,
.menu-button--mobile-logout {
  width: 100%;
}

.menu-button--mobile-user {
  justify-content: flex-start;
}

.menu-button--mobile-logout {
  justify-content: flex-start;
  color: #b91c1c;
}

.menu-button--mobile-logout:hover,
.menu-button--mobile-logout:focus-visible,
.menu-button--mobile-logout.active {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.18);
}

.menu-submenu .menu-button {
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--radius-sm);
}

.menu-button .menu-label {
  flex: 1 1 auto;
  text-align: left;
}

.menu-button__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  margin-left: 0.15rem;
  color: currentColor;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-button__chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}

.menu-button .menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.125rem 0.45rem;
  border-radius: 999px;
  background: var(--accent-strong);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
}

.menu-button--parent .menu-badge {
  margin-left: 0.5rem;
}

.menu-button--parent .menu-button__chevron {
  margin-left: 0.1rem;
}

#menu-my-matches-badge {
  min-width: 1.5rem;
  width: auto;
  height: 1.5rem;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22);
  font-size: 0.72rem;
  line-height: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
}

.menu-group--expanded > .menu-button .menu-button__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.menu-button:hover,
.menu-button:focus-visible {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: transparent;
}

.menu-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.menu-button.active {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: transparent;
}

.menu-button--nested {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
}

.menu-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  line-height: 1;
  color: currentColor;
  opacity: 0.88;
}

.menu-button__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.menu-button[hidden] {
  display: none !important;
}

.profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #e8eef7;
  background-image: url('avatar-default.svg');
  background-size: 85%;
  background-position: center 60%;
  background-repeat: no-repeat;
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 0 2.5px rgba(37, 99, 235, 0.45);
}

.profile-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}

.payments-odoo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.75rem 0;
}

.payments-odoo-actions__hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.odoo-cargo-tag--pagado {
  background: rgba(22, 163, 74, 0.14);
}

.odoo-cargo-tag--facturado {
  background: rgba(37, 99, 235, 0.14);
}

.tag--link {
  border: none;
  cursor: pointer;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-secondary);
  font: inherit;
  appearance: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tag--link:focus-visible,
.tag--link:hover {
  background: rgba(37, 99, 235, 0.12);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.tag--link:active {
  transform: translateY(0);
}

.app-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  padding: 2rem clamp(1.5rem, 3vw, 3.25rem) 3rem;
  background: transparent;
  overflow-x: hidden;
  box-sizing: border-box;
}

.app-section {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.app-section[hidden] {
  display: none;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border);
  margin-bottom: 2rem;
}

/* Clickable admin dashboard cards */

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tournament-categories__poster {
  margin: 0 0 1.5rem;
  padding: 0;
  display: none;
  justify-content: center;
}

.tournament-categories__poster[hidden] {
  display: none;
}

.tournament-categories__poster-image {
  max-height: 180px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.18);
  display: block;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--accent-strong);
  font-weight: 600;
  font-size: 0.95rem;
}

.card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.card-header h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--text-primary);
}

.card-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

#push-settings-card .card-subtitle {
  margin-bottom: 1rem;
}

#push-settings-card .card-actions {
  margin-top: 0.75rem;
}

#push-settings-card .form-hint {
  margin-top: 0.75rem;
}

.player-directory-summary {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.player-directory-summary strong {
  color: var(--accent-strong);
}

.player-directory-controls {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 1.5rem;
}

.player-directory-controls input,
.player-directory-controls select {
  width: 100%;
}

.player-directory-controls__action {
  display: flex;
  align-items: flex-end;
}

.player-directory-controls__action > * {
  width: 100%;
}

.inline-field {
  display: grid;
  gap: 0.4rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.inline-field select {
  min-width: 200px;
}

@media (max-width: 640px) {
  #tournament-matches-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #tournament-matches-card .card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  #tournament-matches-card .card-actions .inline-field {
    width: 100%;
  }

  #tournament-matches-card .card-actions select,
  #tournament-matches-card .card-actions input,
  #tournament-matches-card .card-actions button {
    width: 100%;
  }

  #tournament-matches-card .card-actions select {
    min-width: 0;
  }

  #ranking-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  #ranking-card .card-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  #ranking-card .card-actions .inline-field {
    width: 100%;
  }

  #ranking-card .card-actions select,
  #ranking-card .card-actions button {
    width: 100%;
  }

  #ranking-card .card-actions select {
    min-width: 0;
  }
}

.categories-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}

.categories-toolbar .inline-field {
  margin: 0;
}

.categories-toolbar__note {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: none;
}

.dashboard-metrics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.dashboard-highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05));
}

/* Modo de una sola liga activa: ocupa todo el ancho con diseño de detalle */
.dashboard-highlight--single-league {
  display: block;
}

/* Layout de dos columnas para el bloque de liga única */
.league-highlight-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: start;
  gap: 1.25rem;
}

.league-highlight-poster {
  width: 100%;
  max-width: 350px;
  max-height: none;
  object-fit: cover;
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 12px;
}

.dashboard-highlight--single-league .league-detail {
  display: grid;
  gap: 0.9rem;
}

.dashboard-highlight--single-league .league-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 820px) {
  .league-highlight-layout {
    grid-template-columns: 1fr;
  }
  .league-highlight-poster {
    max-width: 100%;
    max-height: 260px;
    width: 100%;
    margin: 0 auto;
  }
}

/* Optimización móvil: que el bloque aproveche casi todo el ancho */
@media (max-width: 480px) {
  .dashboard-highlight {
    padding: 0.75rem 0.75rem;
  }
  .league-highlight-poster {
    max-height: 300px;
  }
}

.dashboard-highlight__count {
  display: grid;
  gap: 0.35rem;
}

.dashboard-highlight__count strong {
  font-size: 2rem;
  line-height: 1;
  color: var(--accent-strong);
}

.dashboard-highlight__label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.dashboard-highlight__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
}

.dashboard-highlight__list .tag {
  background: rgba(37, 99, 235, 0.16);
  color: var(--accent-strong);
}

.dashboard-highlight__list .empty-state {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.metric-card {
  background: rgba(59, 130, 246, 0.08);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  border: 1px solid rgba(37, 99, 235, 0.15);
  display: grid;
  gap: 0.35rem;
  position: relative;
}

.metric-card strong {
  font-size: 1.6rem;
  color: var(--accent-strong);
}

.metric-card--clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.metric-card--clickable:hover,
.metric-card--clickable:focus-visible {
  box-shadow: 0 0 0 2px var(--accent, #2563eb);
  transform: translateY(-1px);
}

.metric-card .metric-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.metric-card__breakdown {
  display: grid;
  gap: 0.4rem;
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  margin-top: 0;
}

.metric-card__detail-line {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.6rem;
  align-items: center;
  justify-content: end;
  font-size: 0.86rem;
  line-height: 1.15;
  color: var(--text-secondary);
}

.metric-card__detail-label,
.metric-card__detail-total {
  font-weight: 700;
  color: var(--text-primary);
}

.metric-card__detail-label {
  text-align: right;
}

.metric-card__detail-total {
  min-width: 1ch;
}

/* Contenedores de listas del dashboard */
#dashboard-tournaments-list,
#dashboard-leagues-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Tarjetas con cartel para torneos y ligas */
.dashboard-card-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  transition: all 0.2s;
  background: white;
  cursor: pointer;
}

.dashboard-card-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.dashboard-card-poster {
  height: 100%;
  width: auto;
  max-width: 350px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background-color: #f0f0f0;
}

.dashboard-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dashboard-card-content h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-dashboard-hero {
  margin-bottom: 1.5rem;
}

.home-dashboard-hero__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.home-dashboard-hero__copy {
  display: grid;
  gap: 0.35rem;
}

.home-dashboard-hero__copy h1 {
  margin: 0;
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  color: var(--text-primary);
}

.home-dashboard-hero__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* Panel personal de inicio */
.home-panel {
  --home-lime: #dcf56b;
  margin-bottom: 2rem;
}

.home-panel__intro {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.home-panel__eyebrow {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3b4a8f;
}

.home-panel__subtitle {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-secondary);
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.home-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 11.5rem;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 22px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 30px -18px rgba(22, 34, 79, 0.55);
}

.home-stat--enrollments {
  grid-column: 1 / -1;
  min-height: 10.5rem;
  background: linear-gradient(135deg, #3159f5 0%, #2443d6 100%);
}

.home-stat--played {
  background: linear-gradient(160deg, #3e7377 0%, #2b5059 100%);
}

.home-stat--upcoming {
  background: linear-gradient(160deg, #5a4be0 0%, #3a35a8 100%);
}

.home-stat--wins {
  color: #2c3a06;
  background: linear-gradient(160deg, #e4f98b 0%, #c6ea5c 100%);
  border-color: rgba(120, 160, 20, 0.25);
}

.home-stat--losses {
  color: #4a1c10;
  background: linear-gradient(160deg, #ee9d80 0%, #e2785a 100%);
  border-color: rgba(200, 90, 60, 0.25);
}

.home-stat--clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-stat--clickable:hover,
.home-stat--clickable:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -18px rgba(22, 34, 79, 0.7);
  outline: none;
}

.home-stat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.home-stat__label {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  color: inherit;
  opacity: 0.95;
}

.home-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.home-stat__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.home-stat--enrollments .home-stat__icon {
  width: 2.9rem;
  height: 2.9rem;
  color: var(--home-lime);
}

.home-stat--enrollments .home-stat__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.home-stat--wins .home-stat__icon,
.home-stat--losses .home-stat__icon {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
}

.home-stat__value {
  margin: auto 0 0.55rem;
  padding-top: 0.75rem;
  font-size: clamp(2.6rem, 9vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.home-stat--enrollments .home-stat__value {
  font-size: clamp(3rem, 11vw, 4rem);
}

.home-stat__foot {
  display: flex;
}

.home-stat__sport {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.home-stat--wins .home-stat__sport,
.home-stat--losses .home-stat__sport {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.45);
}

.home-stat__art {
  position: absolute;
  z-index: -1;
  right: -0.75rem;
  bottom: -0.75rem;
  width: 6.5rem;
  height: 6.5rem;
  opacity: 0.16;
  pointer-events: none;
  transform: rotate(-8deg);
}

.home-stat__art--court {
  top: 0;
  right: -1rem;
  bottom: auto;
  width: 70%;
  height: 100%;
  opacity: 0.22;
  transform: none;
}

/* Últimos marcadores */
.home-scores {
  display: grid;
  gap: 1.25rem;
}

.home-scores__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.home-scores__header h3 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.home-scores__all {
  flex-shrink: 0;
  max-width: 10.5rem;
  padding: 0.6rem 1rem;
  border-radius: 14px;
  border: 1px solid #c9d3f5;
  background: #ffffff;
  color: #3554f0;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
}

.home-scores__all:hover,
.home-scores__all:focus-visible {
  background: #eef2ff;
}

.home-scores__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.home-score {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #dfe5f3;
  background: #ffffff;
  box-shadow: 0 10px 24px -20px rgba(22, 34, 79, 0.6);
}

.home-score__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: #19244d;
  color: #ffffff;
}

.home-score__sport {
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 600;
}

.home-score__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.home-score__status {
  flex-shrink: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: #dcf56b;
  color: #2f3d0a;
  font-size: 0.85rem;
  font-weight: 600;
}

.home-score__board {
  padding: 0.25rem 1rem 0.5rem;
}

.home-score__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(var(--home-score-sets, 3), 2.4rem) 2.6rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0;
}

.home-score__row + .home-score__row:not(.home-score__row--head) {
  border-top: 1px solid #edf0f7;
}

.home-score__row--head {
  padding: 0.75rem 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a93ab;
}

.home-score__row--head + .home-score__row {
  border-top: 0;
}

.home-score__player {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.home-score__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  overflow: hidden;
  border-radius: 10px;
  background: #e8ecf3;
  color: #5b6478;
  font-size: 0.78rem;
  font-weight: 700;
}

.home-score__avatar--winner {
  background: #3554f0;
  color: #ffffff;
}

.home-score__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-score__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
  color: #5b6478;
}

.home-score__row--winner .home-score__name {
  font-weight: 700;
  color: #16224f;
}

.home-score__cell {
  text-align: center;
}

.home-score__games {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  border-radius: 10px;
  font-size: 1.45rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #8a93ab;
}

.home-score__games--won {
  background: #edf1fd;
  color: #3554f0;
  font-weight: 800;
}

.home-score__sets {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  border-radius: 10px;
  background: #eef1f6;
  color: #5b6478;
  font-size: 1.55rem;
  font-weight: 800;
}

.home-score__row--winner .home-score__sets {
  background: #dcf56b;
  color: #2f3d0a;
}

.home-score__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid #edf0f7;
  background: #f8f9fc;
  color: #6b7489;
  font-size: 0.95rem;
}

.home-score__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.home-score__meta::before {
  content: '';
  width: 1.05rem;
  height: 1.05rem;
  background-color: currentColor;
  -webkit-mask: var(--home-score-icon) center / contain no-repeat;
  mask: var(--home-score-icon) center / contain no-repeat;
}

.home-score__meta--date {
  --home-score-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

.home-score__meta--time {
  --home-score-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.home-score__meta--court {
  margin-left: auto;
  --home-score-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Próximos partidos */
.home-upcoming {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
}

.home-upcoming__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b7489;
}

.home-upcoming__more:hover,
.home-upcoming__more:focus-visible {
  background: #e8ecf6;
}

.home-upcoming__more svg {
  width: 1.4rem;
  height: 1.4rem;
}

.home-upcoming__list {
  padding: 1.25rem 1rem 1.5rem;
}

.home-upcoming > .info-box,
.home-upcoming > .pagination-controls {
  margin: 0 1rem 1rem;
}

.home-upcoming-match {
  border-top: 4px solid #3554f0;
}

.home-upcoming-match__when {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f1f4fc;
  border-bottom: 1px solid #e3e8f2;
}

.home-upcoming-match__day {
  display: grid;
  justify-items: center;
  align-content: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4.4rem;
  border-radius: 14px;
  background: #3554f0;
  color: #ffffff;
  box-shadow: 0 10px 18px -12px rgba(53, 84, 240, 0.8);
}

.home-upcoming-match__day strong {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.home-upcoming-match__day span {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-upcoming-match__details {
  display: grid;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.home-upcoming-match__details strong {
  font-size: 1.15rem;
  font-weight: 600;
  color: #16224f;
}

.home-upcoming-match__details .home-score__meta {
  margin-left: 0;
  color: #6b7489;
  font-size: 1rem;
}

.home-upcoming-match__vs {
  flex-shrink: 0;
  font-size: 1.6rem;
  font-weight: 800;
  color: #b5bdd3;
}

.home-upcoming-match__players {
  display: grid;
  padding: 0.35rem 1rem;
}

.home-upcoming-match__team {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0.65rem 0;
}

.home-upcoming-match__team + .home-upcoming-match__team {
  border-top: 1px solid #edf0f7;
}

.home-upcoming-match__team .home-score__name {
  color: #16224f;
}

.home-score__avatar--blue {
  background: #e8edfd;
  color: #3554f0;
}

.home-score__avatar--lime {
  background: #eef6dc;
  color: #5d7a14;
}

.home-upcoming-match__action {
  display: block;
  width: 100%;
  padding: 0.95rem 1rem;
  border: 0;
  border-top: 1px solid #edf0f7;
  border-radius: 0;
  background: #ffffff;
  color: #3554f0;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
}

.home-upcoming-match__action:hover,
.home-upcoming-match__action:focus-visible {
  background: #f4f6fd;
}

/* Ganador en el marcador */
.home-score__trophy {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
  color: #8bab1f;
}

.home-score__trophy svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Torneos y ligas activas */
.home-competitions {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  border-top: 4px solid #3554f0;
}

.home-competitions--tournaments {
  border-top-color: #e8774f;
}

.home-competitions__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0;
}

.home-competitions__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b6478;
}

.home-competitions__header h3 {
  margin: 0.35rem 0 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #16224f;
}

.home-competitions__more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: #3554f0;
  font-weight: 600;
  white-space: nowrap;
}

.home-competitions__more::after {
  content: '›';
  font-size: 1.3rem;
  line-height: 1;
}

.home-competitions .home-tournament-blocks,
.home-competitions .home-tournament-block {
  gap: 0;
}

.home-competitions__list {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.25rem 1.4rem;
}

.home-competition {
  display: grid;
  grid-template-columns: minmax(7.5rem, 32%) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: #ffffff;
}

.home-competition--clickable {
  cursor: pointer;
}

.home-competition__visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 14rem;
  padding: 0.9rem 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(170deg, #2a52d8 0%, #1d3a9f 55%, #172c74 100%);
}

.home-competition__visual--poster {
  background: #16224f;
}

.home-competition__visual img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-competition__court {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.home-competition__chips {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
}

.home-competition__chip {
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

.home-competition__chip--sport {
  background: #ffffff;
  color: #16224f;
}

.home-competition__chip--sport::before {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.3rem;
  border: 2px solid #3554f0;
  border-radius: 50%;
  vertical-align: -0.02rem;
}

.home-competition__chip--status {
  background: #dcf56b;
  color: #2f3d0a;
}

.home-competition__word {
  display: grid;
  gap: 0.1rem;
}

.home-competition__word strong {
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
}

.home-competition__word span {
  font-size: 0.85rem;
  color: #dcf56b;
}

.home-competition__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1rem;
}

.home-competition__kicker {
  font-size: 0.95rem;
  color: #6b7489;
}

.home-competition__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #16224f;
}

.home-competition__description {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #6b7489;
  line-height: 1.45;
}

.home-competition__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.home-competition__tag {
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  background: #eef1f6;
  color: #4b5570;
  font-size: 0.82rem;
  font-weight: 500;
}

.home-competition__tag--highlight {
  background: #e8edfd;
  color: #2f48c9;
}

.home-competition__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  color: #6b7489;
  font-size: 0.92rem;
}

.home-competition__players {
  --home-score-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.home-competition__fee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #e3e8f2;
  border-radius: 12px;
  background: #f6f8fc;
}

.home-competition__fee-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: #5b6478;
}

.home-competition__fee-label::before {
  content: '';
  width: 1.05rem;
  height: 1.05rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-competition__fee-amount {
  white-space: nowrap;
  color: #3554f0;
}

.home-competition__fee-amount strong {
  font-size: 1.2rem;
  font-weight: 800;
}

.home-competition__fee-amount small {
  margin-left: 0.2rem;
  font-size: 0.78rem;
  color: #8a93ab;
}

.home-competition__progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ebf8;
}

.home-competition__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3554f0;
}

.home-competition__action {
  margin-top: 0.15rem;
  padding: 0.7rem 1rem;
  border: 1px solid #c9d3f5;
  border-radius: 12px;
  background: #ffffff;
  color: #3554f0;
  font-weight: 600;
}

.home-competition__action--primary {
  border-color: #3554f0;
  background: #3554f0;
  color: #ffffff;
}

/* En móvil, el cartel se apila encima y se ve entero */
@media (max-width: 640px) {
  .home-competition.home-competition--poster {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-competition--poster .home-competition__visual {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .home-competition--poster .home-competition__visual img {
    position: static;
    display: block;
    height: auto;
    object-fit: contain;
  }

  .home-competition--poster .home-competition__chips {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
  }
}

@media (max-width: 480px) {
  .home-competitions__header {
    padding: 1.1rem 1rem 0;
  }

  .home-competitions__list {
    padding: 1rem 0.75rem 1.2rem;
  }

  .home-competition {
    grid-template-columns: 7.25rem minmax(0, 1fr);
  }

  .home-competition__body {
    padding: 0.85rem 0.75rem;
  }

  .home-competition__title {
    font-size: 1.15rem;
  }

  .home-competition__fee {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
}

/* Las tarjetas del inicio conservan su marco también en móvil, donde .card lo pierde */
#section-dashboard .home-competitions,
#section-dashboard .home-rankings,
#section-dashboard .home-upcoming,
#section-league-dashboard .home-rankings {
  overflow: hidden;
  padding: 0;
  border: 1px solid #e3e8f2;
  border-radius: 22px !important;
  background: #ffffff;
  box-shadow: 0 10px 24px -22px rgba(22, 34, 79, 0.6);
}

#section-dashboard .home-competitions {
  border-top: 4px solid #3554f0;
}

#section-dashboard .home-competitions--tournaments {
  border-top-color: #e8774f;
}

/* Rankings destacados */
.home-rankings {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
}

.home-rankings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.4rem 1.2rem;
  border-bottom: 1px solid #e6eaf3;
  background: #f6f8fc;
}

.home-rankings__header h3 {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.home-rankings__icon {
  width: 2rem;
  height: 2rem;
  color: #3554f0;
}

.home-rankings__body {
  display: grid;
  gap: 2rem;
  padding: 1.4rem 1rem 1.6rem;
}

.home-ranking {
  display: grid;
  gap: 1rem;
}

.home-ranking__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.25rem;
}

.home-ranking__level {
  padding: 0.35rem 0.75rem;
  border-radius: 10px;
  background: #dcf56b;
  color: #2f3d0a;
  font-weight: 600;
}

.home-ranking__league {
  font-size: 1.2rem;
  font-weight: 600;
  color: #16224f;
}

.home-ranking__leader {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: 18px;
  background: linear-gradient(120deg, #1d2b63 0%, #2c4aa0 100%);
  color: #ffffff;
}

.home-ranking__leader-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #dcf56b;
}

.home-ranking__leader-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.home-ranking__leader-copy {
  display: grid;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}

.home-ranking__leader-copy span {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.home-ranking__leader-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.25rem;
  font-weight: 600;
}

.home-ranking__leader-points {
  display: grid;
  justify-items: center;
  flex-shrink: 0;
}

.home-ranking__leader-points strong {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
  color: #dcf56b;
}

.home-ranking__leader-points span {
  font-size: 0.85rem;
  opacity: 0.8;
}

.home-ranking__table {
  display: grid;
  gap: 0.6rem;
}

.home-ranking__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.4rem 3.6rem 3.4rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.9rem;
  border-radius: 16px;
  border: 1px solid #e3e8f2;
  background: #ffffff;
}

.home-ranking__row--head {
  padding: 0 0.9rem;
  border: 0;
  background: none;
  font-size: 0.85rem;
  color: #8a93ab;
}

.home-ranking__row--head span:not(:first-child) {
  text-align: center;
}

.home-ranking__row--leader {
  background: #f3f7e8;
  border-color: #e3ecc3;
}

.home-ranking__player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.home-ranking__position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  color: #8a93ab;
  font-weight: 600;
}

.home-ranking__position svg {
  width: 1.6rem;
  height: 1.6rem;
}

.home-ranking__position--gold { color: #c99a2e; }
.home-ranking__position--silver { color: #8f9bb8; }
.home-ranking__position--bronze { color: #b87a4b; }

.home-ranking__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 600;
  color: #16224f;
}

.home-ranking__stat {
  text-align: center;
  font-size: 1.05rem;
  color: #8a93ab;
}

.home-ranking__stat--wins {
  color: #5d7a14;
}

.home-ranking__points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  border-radius: 10px;
  background: #edf1fd;
  color: #3554f0;
  font-size: 1.3rem;
  font-weight: 800;
}

.home-ranking__row--leader .home-ranking__points {
  background: #dcf56b;
  color: #2f3d0a;
}

.home-ranking__view-all {
  width: calc(100% - 1rem);
  justify-self: center;
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: #3554f0;
  border-color: #3554f0;
  color: #ffffff;
  font-size: 1.05rem;
}

@media (min-width: 900px) {
  .home-stats {
    grid-template-columns: 2fr repeat(2, minmax(0, 1fr));
  }

  .home-stat--enrollments {
    grid-column: 1;
    grid-row: span 2;
  }
}

@media (max-width: 480px) {
  .home-stats {
    gap: 0.85rem;
  }

  .home-stat {
    min-height: 10rem;
    padding: 1rem;
  }

  .home-stat__label {
    font-size: 0.98rem;
  }

  .home-score__row {
    grid-template-columns: minmax(0, 1fr) repeat(var(--home-score-sets, 3), 2.1rem) 2.4rem;
    gap: 0.25rem;
  }

  .home-score__name {
    font-size: 0.98rem;
  }

  .home-ranking__row {
    grid-template-columns: minmax(0, 1fr) 2.7rem 3rem 2.6rem;
    gap: 0.2rem;
    padding: 0.55rem 0.6rem;
  }

  .home-ranking__player {
    gap: 0.5rem;
  }

  .home-ranking__name {
    font-size: 1rem;
  }

  .home-ranking__row--head {
    font-size: 0.68rem;
    letter-spacing: -0.01em;
  }
}

.home-dashboard-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  align-items: start;
}

.home-dashboard-grid > .card {
  margin-bottom: 0;
}

.home-dashboard-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.home-dashboard-panel__header h3 {
  margin: 0;
}

#home-ranking-card,
#home-upcoming-card,
#dashboard-leagues-card,
#home-league-results-card,
#home-events-card {
  grid-column: span 1;
}

#home-tournament-dashboard {
  grid-column: span 1;
}

#home-tournament-results-card {
  grid-column: 1 / -1;
}

.home-tournament-blocks {
  display: grid;
  gap: 1rem;
}

.home-tournament-block {
  display: grid;
  gap: 1rem;
}

.home-tournament-block__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 1200px) {
  .home-dashboard-grid {
    grid-template-columns: 3fr 2fr;
  }
}

@media (max-width: 768px) {
  .home-dashboard-hero {
    margin-bottom: 2.5rem;
  }

  .home-dashboard-grid {
    grid-template-columns: 1fr;
    margin-top: 0.75rem;
  }

  .home-dashboard-panel__header {
    flex-direction: column;
    align-items: stretch;
  }

  .home-dashboard-panel__header .secondary {
    width: 100%;
  }
}

/* Detalles del torneo en el dashboard */
.dashboard-tournament-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 0.75rem;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.dashboard-tournament-details dt {
  font-weight: 500;
  color: var(--text-secondary);
}

.dashboard-tournament-details dd {
  margin: 0;
  color: var(--text-primary);
}

.dashboard-tournament-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--card-border);
}

.dashboard-tournament-section strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.card-collection {
  display: grid;
  gap: 1rem;
}

.league-ranking-group {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(226, 232, 240, 0.25);
}

.league-ranking-group__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.league-ranking-group__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.league-ranking-group__meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.league-ranking-group__categories {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

#league-ranking-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#league-ranking-cards .league-ranking-group__categories {
  display: flex;
  flex-direction: column;
}

#league-ranking-cards .collection-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#league-ranking-cards .collection-card__list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#league-ranking-cards .collection-card__list-item {
  display: flex;
}

#league-ranking-cards .collection-card__list .empty-state {
  margin: 0;
}

.league-enrolled-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.league-enrolled-list {
  display: grid;
  gap: 0.75rem;
}

.collection-card {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 0.85rem;
}

.collection-card__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.collection-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.collection-card__subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.collection-card__meta {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

.collection-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.collection-card__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(226, 232, 240, 0.35);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.collection-card__position {
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 1.8rem;
}

.collection-card__player {
  display: grid;
  gap: 0.15rem;
  flex: 1;
}

.collection-card__player strong {
  font-weight: 600;
  color: var(--text-primary);
}

.collection-card__player span {
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

.doubles-pair-members {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.doubles-pair-member {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.doubles-pair-member__name {
  font-weight: 600;
  color: var(--text-primary);
}

.doubles-pair-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.doubles-pair-substitute-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Estilos específicos para tarjetas de torneos */
.tournament-card {
  max-width: 100%;
}

.tournament-card__poster {
  margin: 1rem -0.1rem 0.75rem -0.1rem;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tournament-card__poster img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  background: #fff;
  cursor: pointer;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.list li {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  display: grid;
  gap: 0.35rem;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.list li.list-heading {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
}

.list li.league-item--historical,
.list li.tournament-item--historical {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: none;
}

.list .match-category-group {
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.list .tournament-match-group {
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tournament-match-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0;
}

.tournament-match-group__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tournament-match-group__count {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.tournament-match-group__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.tournament-match-group__empty {
  margin: 0;
}

.match-category-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 0;
}

.match-category-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.match-category-group__title strong {
  font-size: 1rem;
}

.match-category-group__count {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.match-category-group__matches {
  margin: 0;
  padding: 0;
}

.match-category-group__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.match-category-group__pagination-info {
  font-weight: 500;
}

.match-category-group__pagination-controls {
  display: flex;
  gap: 0.5rem;
}

.match-category-group__pagination-controls .ghost {
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  transition: all 0.2s ease;
  box-shadow: 0 3px 6px rgba(16, 185, 129, 0.3);
}

.match-category-group__pagination-controls .ghost:hover:not(:disabled) {
  transform: scale(1.05);
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 5px 12px rgba(16, 185, 129, 0.4);
}

.match-category-group__pagination-controls .ghost:active:not(:disabled) {
  transform: scale(0.95);
}

.match-category-group__pagination-controls .ghost:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  box-shadow: none;
}

.list li.is-active {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.16);
}

.list.compact li {
  padding: 0.75rem 1rem;
  gap: 0.4rem;
}

.list li strong {
  font-weight: 600;
  color: var(--text-primary);
}

.list .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.list li.match-list-item {
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
}

.list li.match-list-item--clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.list li.match-list-item--clickable:hover,
.list li.match-list-item--clickable:focus-visible {
  box-shadow: 0 0 0 2px var(--accent, #2563eb);
  transform: translateY(-1px);
}

.list li.match-category-header {
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

.list li.match-category-header h4 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.match-list-item__participants {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.match-list-item__team {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm, 8px);
}

.match-list-item__participants--doubles {
  flex-direction: column;
  align-items: stretch;
}

.match-list-item__participants--doubles .match-list-item__vs {
  align-self: center;
}

.match-list-item__participants--doubles .match-list-item__team {
  width: 100%;
  justify-content: center;
}

.match-list-item__participants--results {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.match-list-item__participants--results .match-list-item__vs {
  margin: 0;
  align-self: center;
}

.match-list-item__participants--results .match-list-item__player {
  width: 100%;
}

.match-list-item__player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.match-list-item__player-name {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
  flex: 1;
}

.match-list-item__vs {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Resaltar ganador en verde */
/* Fondo verde más marcado para ganador */
.match-list-item__player--winner {
  border-color: rgba(16, 185, 129, 0.5) !important;
  background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.10)) !important;
  position: relative;
}

/* Borde interior sutil */
.match-list-item__player--winner::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(16,185,129,0.35);
  border-radius: inherit;
  pointer-events: none;
}

/* Ajuste nombre ganador */
.match-list-item__player--winner .match-list-item__player-name {
  color: #065f46;
  font-size: 0.8rem;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

/* Avatar ganador con anillo verde */
.match-list-item__player--winner .player-avatar {
  box-shadow: 0 0 0 2px rgba(16,185,129,0.55), 0 0 0 4px rgba(16,185,129,0.12);
}

.match-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Casilleros de resultados inline */
.match-list-item__scores {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
}

.match-list-item__score-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f2937;
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  border-radius: calc(var(--radius-sm) - 6px);
  min-width: 1.8rem;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.match-list-item__score-box--tiebreak {
  font-style: italic;
}

.match-list-item__score-box--winner {
  background: #0f172a;
  color: #e0f2fe;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);
}

@media (min-width: 640px) {
  .match-list-item__team {
    flex-direction: row;
    align-items: center;
  }
}

.tournament-bracket-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-top: 1rem;
}

.tournament-bracket-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-left: auto;
}

.tournament-bracket-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tournament-bracket-layout {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.tournament-consolation-card {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .tournament-bracket-layout {
    grid-template-columns: minmax(260px, 320px) 1fr;
    align-items: flex-start;
  }

  .tournament-bracket-layout--single-column {
    grid-template-columns: 1fr;
  }
}

.tournament-bracket-layout--single-column {
  grid-template-columns: 1fr;
}

.tournament-seed-list {
  display: grid;
  gap: 0.75rem;
}

.tournament-seed-entry {
  display: grid;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(241, 245, 249, 0.45);
}

.tournament-seed-entry__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.tournament-seed-entry__player {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.tournament-seed-entry select {
  width: 100%;
}

.tournament-bracket-view {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.tournament-bracket-card .card-actions {
  display: flex;
  gap: 0.5rem;
}

.tournament-bracket-card .card-actions button {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

.tournament-bracket-card .card-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tournament-bracket-card .card-actions .tournament-bracket-fullscreen-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.85rem 1.5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.tournament-bracket-fullscreen-button__icon {
  font-size: 1.2em;
  line-height: 1;
}

.tournament-bracket-card .card-actions .tournament-bracket-pdf-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.85rem 1.5rem;
  background-color: #d92d20;
  border-color: #d92d20;
  box-shadow: 0 6px 16px rgba(217, 45, 32, 0.25);
}

.tournament-bracket-card .card-actions .tournament-bracket-pdf-button:hover:not(:disabled) {
  background-color: #b42318;
  border-color: #b42318;
}

.tournament-bracket-pdf-button__icon {
  font-size: 1.2em;
  line-height: 1;
}

.tournament-bracket-section {
  display: grid;
  gap: 1rem;
}

.tournament-bracket-section + .tournament-bracket-section {
  margin-top: 2.5rem;
}

.tournament-bracket-section__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.tournament-bracket-grid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tournament-bracket-grid {
  --bracket-match-height: 9.75rem;
  --bracket-grid-column-gap: 1.75rem;
  --bracket-connector-thickness: 2px;
  --bracket-connector-color: rgba(148, 163, 184, 0.45);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  column-gap: var(--bracket-grid-column-gap);
  row-gap: 0;
  align-items: flex-start;
  padding: 0 0 0.5rem;
  overflow-x: auto;
}

.tournament-bracket-grid--focus-mode {
  grid-auto-columns: minmax(320px, 1fr);
}

.bracket-round {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 280px;
}

.bracket-round--hidden {
  display: none;
}

.bracket-round--active .bracket-round__title {
  color: var(--accent-strong);
}

.bracket-round__title {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bracket-round-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0 0.25rem;
  overflow-x: auto;
  scrollbar-gutter: stable both-edges;
  width: 100%;
}

.bracket-round-nav__list {
  display: none;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.bracket-round-nav__active-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bracket-round-nav__active-label[hidden] {
  display: none !important;
}

.bracket-round-nav__button {
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(248, 250, 252, 0.85);
  color: var(--text-secondary);
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
}

.bracket-round-nav__button:hover,
.bracket-round-nav__button:focus-visible {
  border-color: rgba(59, 130, 246, 0.6);
  color: var(--accent-strong);
  background: rgba(219, 234, 254, 0.7);
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.15);
  outline: none;
}

.bracket-round-nav__button--active {
  background: #0f172a;
  color: #f8fafc;
  border-color: rgba(15, 23, 42, 0.9);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
}

.bracket-round-nav__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: #ffffff;
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.bracket-round-nav__control:hover:not(:disabled),
.bracket-round-nav__control:focus-visible:not(:disabled) {
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--accent-strong);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.18);
  outline: none;
}

.bracket-round-nav__control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.bracket-round-nav:not(.bracket-round-nav--focus) .bracket-round-nav__control {
  display: none;
}

.bracket-round-nav--focus {
  gap: 0.5rem;
}

.bracket-round-nav--focus .bracket-round-nav__control {
  flex: 0 0 auto;
}

.bracket-round-nav--focus .bracket-round-nav__active-label {
  color: var(--accent-strong);
}

.bracket-round__matches {
  display: flex;
  flex-direction: column;
  gap: var(--bracket-match-gap, 1rem);
  position: relative;
  padding: 0;
  margin-top: var(--bracket-round-offset, 0);
}

.bracket-round__matches--list {
  gap: var(--bracket-match-gap, 1.25rem);
}

.bracket-round__empty {
  border: 1px dashed rgba(148, 163, 184, 0.4);
  border-radius: var(--radius-sm);
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: rgba(248, 250, 252, 0.65);
}

.bracket-match {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.25);
  padding: 0.6rem 0.6rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  min-height: var(--bracket-match-height, auto);
  z-index: 1;
}

.bracket-match--has-prev::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--bracket-grid-column-gap, 1.75rem) / 2);
  width: calc(var(--bracket-grid-column-gap, 1.75rem) / 2);
  height: var(--bracket-connector-thickness, 2px);
  background: var(--bracket-connector-color);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

.bracket-match--has-next.bracket-match--top::after,
.bracket-match--has-next.bracket-match--bottom::after {
  content: '';
  position: absolute;
  left: 100%;
  width: calc(var(--bracket-grid-column-gap, 1.75rem) / 2);
  pointer-events: none;
  z-index: 0;
}

.bracket-match--has-next.bracket-match--top::after {
  top: 50%;
  height: calc(50% + var(--bracket-match-gap, 1rem) / 2);
  border-top: var(--bracket-connector-thickness, 2px) solid var(--bracket-connector-color);
  border-right: var(--bracket-connector-thickness, 2px) solid var(--bracket-connector-color);
  border-top-right-radius: 12px;
}

.bracket-match--has-next.bracket-match--bottom::after {
  bottom: 50%;
  height: calc(50% + var(--bracket-match-gap, 1rem) / 2);
  border-bottom: var(--bracket-connector-thickness, 2px) solid var(--bracket-connector-color);
  border-right: var(--bracket-connector-thickness, 2px) solid var(--bracket-connector-color);
  border-bottom-right-radius: 12px;
}

.bracket-match--placeholder.bracket-match--has-prev::before {
  background: rgba(148, 163, 184, 0.3);
}

.bracket-match--placeholder.bracket-match--has-next.bracket-match--top::after,
.bracket-match--placeholder.bracket-match--has-next.bracket-match--bottom::after {
  border-color: rgba(148, 163, 184, 0.3);
}

.bracket-match--placeholder {
  border-style: dashed;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.75) 0%, rgba(226, 232, 240, 0.55) 100%);
}

.bracket-match__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.bracket-match__label {
  font-weight: 600;
  color: var(--text-secondary);
}

.bracket-match__status {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
}

.bracket-match__players {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bracket-player {
  display: grid;
  grid-template-columns: minmax(1.5rem, auto) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.bracket-player--with-score {
  grid-template-columns:
    minmax(1.5rem, auto)
    auto
    minmax(0, 1fr)
    auto
    repeat(var(--player-sets-count, 1), minmax(1rem, 1.5rem));
}

.bracket-player__avatars {
  display: inline-flex;
  align-items: center;
}

.bracket-player__avatars--pair {
  gap: 0.4rem;
}

.bracket-player__seed {
  font-weight: 700;
  color: var(--accent-strong);
  font-size: 0.85rem;
}

.bracket-player__avatar {
  box-shadow: 0 8px 18px rgba(30, 64, 175, 0.15);
}

.bracket-player--placeholder .bracket-player__avatar {
  box-shadow: none;
  opacity: 0.65;
}

.bracket-player__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.bracket-player__name--placeholder {
  color: var(--text-muted);
  font-weight: 500;
}

.bracket-player__status {
  font-size: 0.78rem;
  color: var(--text-muted);
  align-self: stretch;
  display: flex;
  align-items: center;
}

.bracket-player__scores {
  display: contents;
}

.bracket-player__score {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f2937;
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 0.5rem;
  border-radius: calc(var(--radius-sm) - 6px);
  min-width: 1.8rem;
  line-height: 0.9;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.bracket-player__score--tiebreak {
  font-style: italic;
}

.bracket-player--eliminated .bracket-player__score {
  background: #334155;
  color: #e2e8f0;
}

.bracket-player__score--winner {
  background: #0f172a;
  color: #e0f2fe;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);
}

.bracket-player--winner .bracket-player__name {
  color: #047857;
}

.bracket-player--winner .bracket-player__status {
  color: #047857;
  font-weight: 600;
}

.bracket-player--winner .player-avatar {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.45);
}

.bracket-player--eliminated .bracket-player__name {
  color: rgba(15, 23, 42, 0.6);
}

.bracket-player--eliminated .bracket-player__status {
  color: rgba(100, 116, 139, 0.8);
}

.bracket-match__meta {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Mostrar metadatos (fecha/pista) cuando existan */
.bracket-match--has-meta .bracket-match__meta {
  display: flex;
}

.bracket-match__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.bracket-match__action {
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
}

.tournament-bracket-card .result-scoreboard {
  margin-top: 0.35rem;
}

.bracket-match .result-scoreboard {
  margin-top: 0.45rem;
  max-width: 100%;
}

.bracket-match .result-scoreboard__cell {
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
}

.bracket-match .result-scoreboard__cell--player {
  font-size: 1rem;
}

.match-calendar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.match-calendar-actions__label {
  font-weight: 600;
}

.match-calendar-actions__link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  line-height: 1;
}

.match-calendar-actions__link.ghost {
  padding: 0.45rem 0.9rem;
}

.match-calendar-actions__link:hover,
.match-calendar-actions__link:focus-visible {
  color: var(--accent-strong);
  border-color: rgba(37, 99, 235, 0.45);
}

.list li .list-item__content {
  display: grid;
  gap: 0.35rem;
}

.list li.list-item--with-poster {
  gap: 0.85rem;
}

@media (min-width: 768px) {
  .list li.list-item--with-poster {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }
}

.list-item__poster {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.65), rgba(226, 232, 240, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: min(100%, 240px);
  aspect-ratio: 3 / 4;
  justify-self: center;
}

@media (min-width: 768px) {
  .list-item__poster {
    justify-self: end;
    width: clamp(180px, 22vw, 180px);
  }
}

.list-item__poster-image {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  display: block;
  background: #fff;
  cursor: pointer;
}

.list .meta .movement-badge {
  --movement-badge-width: 150px;
  font-size: 0.75rem;
  padding: 0.45rem 0.65rem;
}

.list .meta .movement-badge .movement-icon {
  width: 20px;
  height: 20px;
}

.list .meta .movement-badge .movement-badge__metric {
  font-size: 0.7rem;
}

.list .meta.warning {
  color: #b45309;
}

.deadline-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #b45309;
  background: rgba(245, 158, 11, 0.15);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  margin: 0;
  line-height: 1.5;
}

.deadline-warning::before {
  content: '⏰';
  font-size: 1rem;
  line-height: 1;
}

.list .meta.result-meta span + span {
  margin-left: 0.5rem;
}

.result-scoreboard {
  --sets-count: 2;
  margin-top: 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(30, 41, 59, 0.24);
  overflow: hidden;
  display: grid;
  gap: 0;
  background: rgba(15, 23, 42, 0.08);
  width: min(100%, 360px);
}

.result-scoreboard__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(var(--sets-count), minmax(0.4rem, 0.8rem));
  align-items: stretch;
}

.result-scoreboard__row + .result-scoreboard__row {
  border-top: 1px solid rgba(30, 41, 59, 0.18);
}

.result-scoreboard__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.05;
}

.result-scoreboard__cell--player {
  justify-content: flex-start;
  font-weight: 700;
  color: var(--text-primary);
  background: rgb(255 255 255);
}

.result-scoreboard__row--winner .result-scoreboard__cell--player {
  font-weight: 700;
}

.result-scoreboard__cell--score {
  background: #1f2937;
  color: #f8fafc;
  min-width: 2.2rem;
}

/* Alinear el marcador a la derecha dentro de las listas de resultados */
.list li.match-list-item .result-scoreboard,
.list li .result-scoreboard {
  justify-self: end;
  margin-left: auto;
}

.result-scoreboard__row:not(.result-scoreboard__row--winner) .result-scoreboard__cell--score {
  background: #374151;
}

.result-scoreboard__cell--tiebreak {
  font-style: italic;
}

.match-viewer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.match-viewer__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.match-viewer__section h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.match-viewer__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
}

.match-viewer__info dt {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.match-viewer__info dd {
  margin: 0;
  color: var(--text-secondary);
}

.match-viewer__details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.match-viewer__players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.match-viewer__player {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.match-viewer__player-name {
  font-weight: 600;
  color: var(--text-primary);
}

.match-viewer__player-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.match-viewer__notes {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.match-viewer__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.match-viewer .result-scoreboard {
  margin-top: 0.5rem;
}

.list .meta .tag {
  margin-left: 0.5rem;
}

.list .meta .tag:first-of-type {
  margin-left: auto;
}

.meta.meta-category {
  align-items: center;
  gap: 0.5rem;
}

.meta.meta-category .category-status {
  margin-left: auto;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.meta.meta-category .category-status.category-status--en_curso {
  background: rgba(250, 204, 21, 0.18);
  color: #92400e;
}

.meta.meta-category .category-level {
  background: rgba(148, 163, 184, 0.18);
  color: #334155;
}

#user-directory-list .meta,
#league-players-list .meta {
  align-items: center;
  font-size: 0.85rem;
  gap: 0.4rem;
}

#user-directory-list .actions,
#league-players-list .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#league-players-list .league-players-card__body li,
#tournament-enrollment-list .league-players-card__body li {
  padding: 0.55rem 0.75rem;
  margin: 10px;
}

/* ── Visual user cards for admin directory ── */
#user-directory-list li {
  display: grid;
  padding: 0;
  gap: 0;
  margin: 10px;
  overflow: hidden;
}

#user-directory-list .user-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

#user-directory-list .user-card__header .player-cell {
  flex: 1;
  min-width: 0;
}

#user-directory-list .user-card__role {
  flex-shrink: 0;
}

#user-directory-list .user-card__body {
  display: grid;
  gap: 0;
  padding: 0;
}

#user-directory-list .user-card__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: rgba(148, 163, 184, 0.04);
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

#user-directory-list .user-card__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#user-directory-list .user-card__contact-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-secondary);
  opacity: 0.6;
}

#user-directory-list .user-card__contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

#user-directory-list .user-card__contact-action svg {
  width: 15px;
  height: 15px;
}

#user-directory-list .user-card__contact-action:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

#user-directory-list .user-card__contact-action--call {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

#user-directory-list .user-card__contact-action--whatsapp {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
}

#user-directory-list .user-card__info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  padding: 0;
}

#user-directory-list .user-card__info-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  border-right: 1px solid rgba(148, 163, 184, 0.08);
}

#user-directory-list .user-card__info-item:last-child {
  border-right: none;
}

#user-directory-list .user-card__info-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  opacity: 0.7;
}

#user-directory-list .user-card__info-value {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
}

#user-directory-list .user-card__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

#user-directory-list .user-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

#user-directory-list .user-card__stat--wins {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

#user-directory-list .user-card__stat--losses {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

#user-directory-list .user-card__stat svg {
  width: 12px;
  height: 12px;
}

#user-directory-list .user-card__membership {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

#user-directory-list .user-card__membership-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-secondary);
}

#user-directory-list .user-card__membership-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}

#user-directory-list .user-card__consent {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  padding: 0.45rem 1rem;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

#user-directory-list .user-card__consent-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

#user-directory-list .user-card__consent-item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

#user-directory-list .user-card__consent-item--accepted {
  color: #15803d;
}

#user-directory-list .user-card__consent-item--rejected {
  color: #9ca3af;
}

#user-directory-list .user-card__notes {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: rgba(250, 204, 21, 0.06);
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}

#user-directory-list .user-card__notes svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.5;
}

#user-directory-list .user-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
}

@media (max-width: 600px) {
  #user-directory-list .user-card__info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #user-directory-list .user-card__header {
    flex-wrap: wrap;
  }
}

#league-players-list.league-players-grid > li.league-players-card,
#tournament-enrollment-list.league-players-grid > li.league-players-card {
  padding: 0;
}

#league-players-list.league-players-grid,
#tournament-enrollment-list.league-players-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  padding: 0;
  align-items: start;
}

.league-players-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.league-players-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-subtle, #f5f5f5);
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.league-players-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #212121);
}

.league-players-card__count {
  font-size: 0.8rem;
  color: var(--text-secondary, #666);
  white-space: nowrap;
}

.league-players-card__body {
  list-style: none;
  padding: 0;
  margin: 0;
}

.league-players-card__body > li:not(:last-child) {
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}

#league-players-list .league-players-item,
#tournament-enrollment-list .league-players-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#league-players-list .league-players-item .player-cell,
#tournament-enrollment-list .league-players-item .player-cell {
  flex: 1;
  min-width: 0;
}

.league-players-item__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

#user-directory-list .player-cell__name,
#league-players-list .player-cell__name,
#tournament-enrollment-list .player-cell__name {
  font-size: 1rem;
}

#user-directory-list .player-cell,
#league-players-list .player-cell,
#tournament-enrollment-list .player-cell {
  align-items: flex-start;
}

/* Responsive: Jugadores inscritos en móvil – ancho completo */
@media (max-width: 1024px) {
  #league-players-card {
    padding: 0.5rem 0 !important;
  }
  #league-players-list.league-players-grid,
  #tournament-enrollment-list.league-players-grid {
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0 !important;
  }
  .league-players-card {
    width: 100% !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }
  #league-players-list .league-players-item .player-cell,
  #tournament-enrollment-list .league-players-item .player-cell {
    align-items: center;
  }
}

.league-payments-controls,
.tournament-payments-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.league-payments-summary,
.tournament-payments-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.league-payments-groups,
.tournament-payments-groups {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 920px) {
  .league-payments-groups,
  .tournament-payments-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.league-payments-group,
.tournament-payments-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.league-payments-group-header,
.tournament-payments-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.league-payments-group-stats,
.tournament-payments-group-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.league-payments-group-header h4,
.tournament-payments-group-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.league-payments-list,
.tournament-payments-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.league-payment-entry,
.tournament-payment-entry {
  list-style: none;
}

.league-payment-item,
.tournament-payment-item {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.6), rgba(248, 250, 252, 0.9));
  overflow: hidden;
}

.league-payment-item summary,
.tournament-payment-item summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.league-payment-item summary:focus-visible,
.tournament-payment-item summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.league-payment-item summary::-webkit-details-marker,
.league-payment-item summary::marker,
.tournament-payment-item summary::-webkit-details-marker,
.tournament-payment-item summary::marker {
  display: none;
}

.league-payment-item summary::after,
.tournament-payment-item summary::after {
  content: '';
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
  margin-left: auto;
}

.league-payment-item[open] summary::after,
.tournament-payment-item[open] summary::after {
  transform: rotate(45deg);
  opacity: 0.8;
}

.league-payment-header,
.tournament-payment-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.league-payment-header .player-cell,
.tournament-payment-header .player-cell {
  align-items: center;
  gap: 0.55rem;
}

.league-payment-header .player-cell__name,
.tournament-payment-header .player-cell__name {
  font-size: 0.95rem;
}

.league-payment-header-meta,
.tournament-payment-header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.league-payment-header-meta .tag,
.tournament-payment-header-meta .tag {
  margin-left: 0;
}

.league-payment-header-meta .league-payment-amount,
.tournament-payment-header-meta .tournament-payment-amount {
  font-weight: 600;
  color: var(--text-primary);
}

.league-payment-body,
.tournament-payment-body {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  background: var(--card-bg);
}

.league-payment-meta,
.tournament-payment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.league-payment-meta .tag,
.tournament-payment-meta .tag {
  margin-left: 0;
}

.league-payment-form,
.tournament-payment-form {
  display: grid;
  gap: 0.75rem;
}

.league-payment-form .form-row,
.tournament-payment-form .form-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.league-payment-form .form-actions,
.tournament-payment-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.league-payment-form select[name='method'],
.tournament-payment-form select[name='method'] {
  text-transform: capitalize;
}

.tag.payment-status {
  font-size: 0.75rem;
}

.tag.payment-status.payment-status--pendiente {
  background: rgba(245, 158, 11, 0.16);
  color: var(--warning);
}

.tag.payment-status.payment-status--pagado {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.tag.payment-status.payment-status--exento {
  background: rgba(129, 140, 248, 0.16);
  color: #4338ca;
}

.tag.payment-status.payment-status--fallido {
  background: rgba(248, 113, 113, 0.16);
  color: #b91c1c;
}

.tag.membership-status {
  font-size: 0.75rem;
}

.tag.membership-status.membership-status--member {
  background: rgba(59, 130, 246, 0.16);
  color: #1d4ed8;
}

.tag.membership-status.membership-status--non-member {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-secondary);
}

.empty-state {
  text-align: center;
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-secondary);
}

.auth-loading-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  background: rgba(22, 163, 74, 0.14);
  border: 1px solid rgba(22, 163, 74, 0.24);
  color: var(--success);
  font-weight: 600;
}

.list-item-button {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.list-item-button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 4px;
}

.tournament-grid,
.league-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .tournament-grid,
  .league-grid {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  }
}

/* Cuando la columna izquierda de torneos está oculta, usar ancho completo */
@media (min-width: 1024px) {
  #tournaments-card[hidden] + #tournament-detail-card {
    grid-column: 1 / -1;
  }
}

.tournament-detail,
.league-detail {
  display: grid;
  gap: 1.5rem;
}

.tournament-detail__layout,
.league-detail__layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .tournament-detail__layout,
  .league-detail__layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.tournament-detail__content,
.league-detail__content {
  display: grid;
  gap: 1.25rem;
  flex: 1;
}

.tournament-detail__poster {
  width: 100%;
  max-width: 320px;
  max-height: 450px;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.18);
  align-self: flex-start;
  flex-shrink: 0;
}

.event-card__poster {
  width: 100%;
  max-height: 480px;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.18);
  margin: 0.85rem 0;
  cursor: zoom-in;
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0;
}

.event-card__meta span {
  background: var(--bg-secondary);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.event-card__description {
  margin: 0.6rem 0 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

#home-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.home-event-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}

.home-event-row__poster {
  flex: 1 1 280px;
  max-width: 350px;
}

.home-event-row__poster img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  cursor: zoom-in;
}

.home-event-row__content {
  flex: 3 1 280px;
  min-width: 280px;
}

@media (max-width: 768px) {
  .home-event-row__poster {
    max-width: 100%;
  }
}

.event-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.event-action {
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  border: none;
  color: #ffffff;
  font-weight: 600;
  white-space: nowrap;
  transition: filter 0.2s ease;
}

.event-action:hover:not(:disabled),
.event-action:focus-visible:not(:disabled) {
  filter: brightness(0.92);
}

.event-action--enroll {
  background: var(--accent);
}

.event-action--cancel {
  background: #ef4444;
}

.event-action--view {
  background: #3b82f6;
}

.event-action--attendees {
  background: #8b5cf6;
}

.event-action--publish {
  background: var(--success);
}

.event-action--edit {
  background: #64748b;
}

.event-action--delete {
  background: #ef4444;
}

.event-action:disabled {
  filter: none;
  opacity: 0.6;
}

.event-attendees-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.attendees-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.attendee-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.attendee-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  .attendee-avatar {
    background: rgba(255, 255, 255, 0.1);
  }
}

.attendee-name {
  font-weight: 500;
  color: inherit;
}

.league-detail__poster {
  width: 100%;
  max-width: 350px;
  max-height: none;
  height: auto;
  border-radius: 12px;
  display: block;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.18);
  object-fit: cover;
  flex-shrink: 0;
  align-self: flex-start;
}

.tournament-detail__header,
.league-detail__header {
  display: grid;
  gap: 0.4rem;
}

.tournament-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tournament-detail__description {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.tournament-detail__meta,
.league-detail__meta {
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.tournament-detail__meta-item,
.league-detail__meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tournament-detail__meta-label,
.league-detail__meta-label {
  font-weight: 600;
  color: var(--text-primary);
}

.tournament-detail__fees {
  display: grid;
  gap: 0.5rem;
}

.tournament-fee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(37, 99, 235, 0.08);
  color: var(--text-primary);
}

.tournament-fee__label {
  font-weight: 600;
}

.tournament-section-title,
.league-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.tournament-section-note,
.league-section-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.tournament-match-item {
  display: grid;
  gap: 0.55rem;
  text-align: left;
  justify-items: start;
}

.tournament-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.tournament-badge,
.category-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.8rem;
}

.tournament-badge {
  background: var(--primary-100);
  color: var(--primary-700);
}

.category-badge {
  background: var(--accent-100);
  color: var(--accent-700);
}

.tournament-match-item__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.tournament-match-result {
  display: grid;
  gap: 0.35rem;
  background: rgba(15, 23, 42, 0.04);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
}

.tournament-match-result__score {
  font-weight: 600;
  color: var(--text-primary);
}

.tournament-match-result__meta,
.tournament-match-result__notes {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.tournament-match-result__notes {
  white-space: pre-line;
}

.tournament-detail__categories,
.league-detail__categories {
  display: grid;
  gap: 0.6rem;
}

.tournament-detail__category,
.league-detail__category {
  background: rgba(15, 23, 42, 0.04);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  display: grid;
  gap: 0.35rem;
}

.tournament-detail__category strong,
.league-detail__category strong {
  font-weight: 600;
  color: var(--text-primary);
}

.tournament-detail__category .meta,
.league-detail__category .meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.league-category-delete-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.2s, color 0.2s, background 0.2s;
}

.league-detail__category {
  position: relative;
}

.league-detail__category:hover .league-category-delete-btn {
  opacity: 1;
}

.league-category-delete-btn:hover {
  color: var(--danger-color, #dc2626);
  background: rgba(220, 38, 38, 0.1);
}

.league-category-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.league-category-delete-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}

.list .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.category-actions {
  align-items: center;
  gap: 0.5rem;
}

.note {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.tag--success {
  background: #dcfce7;
  color: #166534;
}

.tag--pending {
  background: #fef3c7;
  color: #92400e;
}

.calendar-event--actionable {
  cursor: pointer;
}

.calendar-event--actionable:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.inline-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.inline-list li {
  background: rgba(148, 163, 184, 0.15);
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.meta.meta-league-link {
  gap: 0.5rem;
}

.meta.meta-league-link .league-tag {
  background: rgba(59, 130, 246, 0.15);
  color: #1d4ed8;
}

.meta.meta-league-link .league-tag.league-tag--closed {
  background: rgba(148, 163, 184, 0.2);
  color: #475569;
}

.meta.meta-league-link .league-status {
  margin-left: auto;
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
}

.meta.meta-league-link .league-status.league-status--activa {
  background: rgba(34, 197, 94, 0.18);
  color: #047857;
}

.league-poster-upload .form-actions {
  margin-top: 0.75rem;
}

.league-poster-upload input[type='file'] {
  margin-top: 0.5rem;
}

#leagues-list .actions {
  margin-top: 0.75rem;
}

.checkbox-group {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.checkbox-group legend {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.checkbox-option--stacked {
  flex-direction: column;
  align-items: flex-start;
}

.checkbox-option--stacked input[type='checkbox'] {
  margin-top: 0.1rem;
}

.checkbox-group .form-hint {
  margin: 0.25rem 0 0;
}

#register-role-wrapper[data-locked='true'] {
  opacity: 0.6;
}

#register-role-wrapper[data-locked='true'] input {
  pointer-events: none;
}

.enrollment-modal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.enrollment-modal .list.compact li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.enrollment-modal .list.compact li .meta {
  flex: 1;
}

.icon-only {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 2000;
}

.modal {
  width: min(720px, 100%);
  max-height: min(85vh, 720px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.75rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.modal-body {
  padding: 1.75rem;
  overflow-y: auto;
  display: grid;
  gap: 1.5rem;
}

.modal-body .form {
  gap: 1.25rem;
}

.modal-body .form-actions {
  justify-content: flex-end;
}

.modal-body .status-message {
  margin: 0;
}

/* Popup de comunicaciones de teléfono */
.phone-consent-popup {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}

.phone-consent-popup__icon {
  font-size: 3rem;
  line-height: 1;
}

.phone-consent-popup__message {
  text-align: left;
}

.phone-consent-popup__message p {
  margin: 0 0 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.phone-consent-popup__message p:first-child {
  color: var(--text-primary);
  font-size: 1.05rem;
}

.phone-consent-popup__message p:last-child {
  margin-bottom: 0;
}

.phone-consent-popup__hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

.phone-consent-popup .form-actions {
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.phone-consent-popup__dont-show-btn {
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
}

/* Animación de resaltado para el checkbox */
@keyframes highlight-pulse {
  0% {
    background-color: rgba(37, 99, 235, 0);
  }
  30% {
    background-color: rgba(37, 99, 235, 0.15);
  }
  100% {
    background-color: rgba(37, 99, 235, 0);
  }
}

.tag { 
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-strong);
  background: rgba(37, 99, 235, 0.12);
}

.tag--block {
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
}

.tag.match-type-tag {
  background: rgba(100, 116, 139, 0.18);
  color: #334155;
}

.tag.admin {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.tag.status-pendiente {
  background: rgba(249, 115, 22, 0.18);
  color: #c2410c;
}

.tag.status-inscrito {
  background: rgba(239, 68, 68, 0.18);
  color: #dc2626;
}

.tag.status-propuesto {
  background: rgba(14, 165, 233, 0.16);
  color: var(--info);
}

.tag.status-programado {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.tag.status-completado {
  background: rgba(59, 130, 246, 0.18);
  color: var(--accent-strong);
}

.tag.status-inscripcion {
  background: rgba(59, 130, 246, 0.18);
  color: var(--accent-strong);
}

.tag.status-en_juego {
  background: rgba(34, 197, 94, 0.16);
  color: #166534;
}

.tag.status-finalizado {
  background: rgba(100, 116, 139, 0.16);
  color: #334155;
}

.tag.status-archivado {
  background: rgba(100, 116, 139, 0.16);
  color: #334155;
}

.tag.status-cuadros {
  background: rgba(14, 165, 233, 0.16);
  color: var(--info);
}

.tag.status-confirmada {
  background: rgba(239, 68, 68, 0.18);
  color: #dc2626;
}

.tag.status-cancelada {
  background: rgba(239, 68, 68, 0.18);
  color: var(--danger);
}

.tag.status-confirmado {
  background: rgba(34, 197, 94, 0.16);
  color: #166534;
}

.tag.status-rechazado {
  background: rgba(239, 68, 68, 0.18);
  color: var(--danger);
}

.tag.status-caducado {
  background: rgba(148, 163, 184, 0.22);
  color: #475569;
}

.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.matches-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.matches-grid #upcoming-card,
.matches-grid #pending-approvals-card,
.matches-grid #my-matches-card,
.matches-grid #my-scheduled-matches-card,
.matches-grid #my-pending-matches-card,
.matches-grid #completed-card {
  grid-column: 1 / -1;
}

.matches-grid #admin-matches-card {
  grid-column: 1 / -1;
}

/* Material Design Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* View Toggle */

.chat-editor-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.chat-editor {
  display: grid;
  gap: 0.75rem;
}

.chat-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.chat-toolbar-button {
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.chat-toolbar-button:hover,
.chat-toolbar-button:focus-visible {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-strong);
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.chat-toolbar-button:active {
  transform: scale(0.95);
}

.chat-editor-content {
  min-height: 112px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  padding: 0.9rem 1rem;
  background: var(--card-bg);
  line-height: 1.6;
  overflow-y: auto;
}

.chat-editor-content:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.chat-editor-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-secondary);
  pointer-events: none;
}

.chat-editor-content h1,
.chat-editor-content h2,
.chat-editor-content h3 {
  margin: 0 0 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
}

.chat-editor-content p,
.chat-editor-content li {
  margin: 0 0 0.6rem;
}

.chat-editor-content ul,
.chat-editor-content ol {
  padding-left: 1.5rem;
  margin: 0 0 0.6rem;
}

.chat-editor-content blockquote {
  border-left: 4px solid rgba(59, 130, 246, 0.35);
  margin: 0 0 0.8rem;
  padding-left: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
}

.rules-content {
  display: grid;
  gap: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.rules-content > * {
  margin: 0;
}

.rules-content h1,
.rules-content h2,
.rules-content h3,
.rules-content h4 {
  margin: 1.25rem 0 0.6rem;
  color: var(--accent-primary);
  font-weight: 600;
}

.rules-content h1:first-child,
.rules-content h2:first-child,
.rules-content h3:first-child,
.rules-content h4:first-child {
  margin-top: 0;
}

.rules-content p {
  margin: 0 0 1rem;
}

.rules-content ul,
.rules-content ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.rules-content li {
  margin-bottom: 0.4rem;
}

.rules-content blockquote {
  border-left: 4px solid rgba(59, 130, 246, 0.35);
  margin: 0 0 1rem;
  padding-left: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

@media (max-width: 600px) {
  .table-scroll {
    margin: 0 0.25rem;
    padding: 0;
    width: calc(100% + 1.5rem);
  }
}

.ranking-category-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ranking-category {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--radius-lg);
  background: rgba(248, 250, 252, 0.8);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ranking-category__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .ranking-category__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.ranking-category__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.ranking-category__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.ranking-category__table {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ranking-category__table-scroll {
  max-height: calc(10 * 3.25rem);
  overflow-y: auto;
  max-width: 100%;
}

@media (max-width: 600px) {
  .ranking-category__table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.ranking-category__empty {
  margin: 0;
  color: var(--text-secondary);
  font-style: italic;
}

/* Tarjetas de ranking para móvil */
.ranking-category__cards {
  display: none;
}

.ranking-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.ranking-card:last-child {
  margin-bottom: 0;
}

.ranking-card__position {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-dark);
  min-width: 2.5rem;
  text-align: left;
}

.ranking-card__player-name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ranking-card__points {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

.table th,
.table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

/* Tablas responsive en móvil */
@media (max-width: 600px) {
  .table {
    min-width: 0 !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table th,
  .table td {
    padding: 0.65rem 0.5rem;
    font-size: 0.85rem;
  }
}

.table th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.table tbody tr:hover {
  background: rgba(148, 163, 184, 0.12);
}

.player-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.player-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.25);
  color: var(--text-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-transform: uppercase;
  outline: 2px solid rgba(96, 165, 250, 0.45);
  outline-offset: 2px;
}

.player-avatar--md {
  width: 42px;
  height: 42px;
  font-size: 0.95rem;
}

.player-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
}

.player-avatar--placeholder {
  background-color: #e8eef7;
  background-image: url('avatar-default.svg');
  background-size: 85%;
  background-position: center 60%;
  background-repeat: no-repeat;
  color: transparent;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-cell__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.player-cell__name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
}

.player-cell__meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  /* Agregar borde a las categorías para diferenciarlas */
  .ranking-category {
    border: 2px solid rgba(148, 163, 184, 0.3) !important;
    background: rgba(248, 250, 252, 0.5) !important;
    padding: 1rem !important;
    border-radius: var(--radius-lg) !important;
  }

  /* Ocultar tabla en móvil solo si hay tarjetas */
  .ranking-category:has(.ranking-category__cards) .ranking-category__table {
    display: none !important;
  }

  /* Si no hay tarjetas, hacer la tabla responsive sin scroll */
  .ranking-category__table {
    border: none;
    overflow-x: visible;
  }

  .ranking-category__table-scroll {
    overflow-x: visible !important;
    max-height: none !important;
  }

  /* Ocultar avatar de jugadores en tabla móvil */
  .ranking-category__table .player-avatar,
  .ranking-category__table .player-cell .player-avatar {
    display: none !important;
  }

  /* Mostrar tarjetas en móvil */
  .ranking-category__cards {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Para tarjetas de colección (collection-card) */
  .collection-card {
    border: 2px solid rgba(148, 163, 184, 0.3) !important;
    background: rgba(248, 250, 252, 0.5) !important;
    padding: 1rem !important;
    border-radius: var(--radius-lg) !important;
  }

  /* Ocultar lista normal en móvil solo si hay tarjetas */
  .collection-card:has(.ranking-category__cards) .collection-card__list {
    display: none !important;
  }

  /* Mostrar tarjetas de ranking en móvil */
  .collection-card .ranking-category__cards {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

.movement-badge {
  --movement-badge-width: 160px;
  display: none;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 16px;
  background: var(--movement-badge-bg, rgba(148, 163, 184, 0.2));
  color: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  width: var(--movement-badge-width);
  min-height: 72px;
  box-sizing: border-box;
}

.movement-badge .movement-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.movement-badge__metrics {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.movement-badge__metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  line-height: 1.2;
}

.movement-badge__metric-label {
  color: rgba(15, 23, 42, 0.7);
  font-weight: 500;
}

.movement-badge__metric-value {
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
}

.movement-badge__metric--positive .movement-badge__metric-value {
  color: #15803d;
}

.movement-badge__metric--negative .movement-badge__metric-value {
  color: #dc2626;
}

.movement-badge__metric--neutral .movement-badge__metric-value {
  color: inherit;
}

.movement-badge--none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--movement-badge-width, 160px);
  min-height: 72px;
  padding: 0.55rem 0.75rem;
  border-radius: 16px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-secondary);
  font-weight: 600;
}

.movement-badge--inline {
  flex: 0 0 var(--movement-badge-width, 160px);
  margin-top: 0.35rem;
}

.account-section__columns {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .account-section__columns {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    align-items: start;
  }
}

.account-wrapper {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.account-overview {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(148, 163, 184, 0.1);
}

.account-photo {
  position: relative;
  width: 120px;
  height: 120px;
  padding: 0;
  border-radius: 22px;
  background-color: var(--accent-soft);
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(37, 99, 235, 0.22);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.account-photo:hover,
.account-photo:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.account-photo__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.account-photo:hover .account-photo__overlay,
.account-photo:focus-visible .account-photo__overlay {
  opacity: 1;
}

.account-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.account-list div {
  display: grid;
  gap: 0.3rem;
}

.account-list dt {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.account-list dd {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.account-dashboard {
  display: grid;
  gap: 1.5rem;
}

.account-dashboard__metrics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.account-dashboard__totals {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.account-dashboard__total {
  background: rgba(37, 99, 235, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  display: grid;
  gap: 0.25rem;
  color: var(--text-primary);
}

.account-dashboard__total span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.account-dashboard__sections {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .account-dashboard__sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.account-dashboard__column {
  display: grid;
  gap: 1.5rem;
}

.account-dashboard__section {
  display: grid;
  gap: 0.75rem;
}

.account-dashboard__section h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.account-dashboard .list {
  background: transparent;
  box-shadow: none;
  gap: 0.75rem;
}

.account-dashboard .list li {
  box-shadow: none;
  background: #ffffff;
}

.account-dashboard .empty-state {
  margin: 0;
}

.profile-form {
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #ffffff;
}

.club-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 1.75rem;
}

.club-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
}

.club-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.club-logo {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(148, 163, 184, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-strong);
  background-size: cover;
  background-position: center;
  text-transform: uppercase;
}

.club-description {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.club-info-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.club-info-list div {
  display: grid;
  gap: 0.25rem;
}

.club-info-list dt {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.club-info-list dd {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.club-details {
  display: grid;
  gap: 1.5rem;
}

.club-details section {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  background: var(--card-bg);
}

.club-details h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--text-primary);
}

.bullet-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
  color: var(--text-secondary);
}

.bullet-list li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-strong);
  opacity: 0.35;
}

.club-slogan-text {
  margin: 0;
  color: var(--text-secondary);
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-secondary);
}

.calendar-nav button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-strong);
  border: 1px solid rgba(59, 130, 246, 0.35);
  font-size: 1.25rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.15);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  outline: 2px solid transparent;
}

.calendar-nav button:hover,
.calendar-nav button:focus-visible {
  background: rgba(59, 130, 246, 0.2);
  color: var(--accent-strong);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
}

.calendar-nav button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.calendar-label {
  font-weight: 600;
  color: var(--text-primary);
}

.calendar-container {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

.calendar-day-list {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-month-wrapper {
  display: grid;
  gap: 0;
}

.calendar-weekday-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.calendar-weekday-header {
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 0.5rem;
}

.calendar-day {
  border-radius: var(--radius-sm);
  padding: 1rem;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  display: grid;
  gap: 0.6rem;
}

.calendar-day--actionable {
  cursor: pointer;
}

.calendar-day--actionable:focus {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.calendar-day-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.calendar-day-header strong {
  font-size: 1.05rem;
}

.calendar-day-header span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.calendar-day--today {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.calendar-day--selected {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}

.calendar-day--other-month {
  opacity: 0.4;
}

.calendar-event {
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.18);
  display: grid;
  gap: 0.25rem;
}

.calendar-event__type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  width: fit-content;
  margin-bottom: 0.15rem;
}

.calendar-event--reservation {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.32);
}

.calendar-event--match {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.28);
}
.calendar-event--tournament-match {
  background: rgba(249, 115, 22, 0.14);
  border-color: rgba(249, 115, 22, 0.32);
}

.calendar-event--pre-reservation {
  border-style: dashed;
}

.calendar-event--reservation.calendar-event--pre-reservation {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.32);
}
.calendar-event--match.calendar-event--pre-reservation {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.28);
}
.calendar-event--tournament-match.calendar-event--pre-reservation {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.32);
}

.calendar-event--block {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.32);
  color: #7f1d1d;
}

.calendar-event--spanning {
  border-style: dashed;
}

.calendar-day--schedule {
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.calendar-day--schedule .calendar-day-header {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  margin-bottom: 0.35rem;
  gap: 0.2rem;
}

.calendar-day--schedule .calendar-day-header strong {
  font-size: 1.35rem;
}

.calendar-day--schedule .calendar-day-header span {
  font-size: 0.95rem;
}

.match-schedule-field {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.match-schedule-picker {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.match-schedule-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.match-schedule-picker__header .calendar-nav {
  gap: 0.5rem;
}

.match-schedule-picker__label {
  font-size: 1.05rem;
}

.match-schedule-picker__date-picker {
  margin-left: auto;
}

.match-schedule-picker__date-input {
  width: auto;
  min-width: 0;
}

.match-schedule-picker__grid.calendar-container {
  margin-top: 0.5rem;
}

.match-schedule-picker__status {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0;
}

.match-schedule-picker__status--error {
  color: var(--danger);
}

.match-schedule-picker__grid {
  overflow-x: auto;
}

/* ========== Schedule Picker Courts (estilo tarjetas) ========== */
.schedule-picker-courts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.schedule-picker-court {
  background: rgba(148, 163, 184, 0.08);
  border-radius: 0.75rem;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.schedule-picker-court__header {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}

.schedule-picker-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 0.5rem;
}

.schedule-picker-slot {
  padding: 0.55rem 0.4rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
}

.schedule-picker-slot__time {
  font-weight: 700;
  font-size: 0.85rem;
}

.schedule-picker-slot__status {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.schedule-picker-slot__info {
  font-size: 0.6rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0.9;
}

/* Estados de los slots */
.schedule-picker-slot--free {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
  cursor: pointer;
}

.schedule-picker-slot--free:hover,
.schedule-picker-slot--free:active {
  background: #dcfce7;
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.schedule-picker-slot--free.is-selected {
  background: #22c55e;
  color: white;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

.schedule-picker-slot--free.is-selected .schedule-picker-slot__time,
.schedule-picker-slot--free.is-selected .schedule-picker-slot__status {
  color: white;
}

.schedule-picker-slot--reserved {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.schedule-picker-slot--match {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #5b21b6;
}

.schedule-picker-slot--tournament {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #ea580c;
}

.schedule-picker-slot--blocked {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.schedule-picker-slot--past {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #9ca3af;
}

/* ========== Schedule Grid Mobile Styles ========== */
@media (max-width: 640px) {
  .match-schedule-picker {
    padding: 0.5rem;
    gap: 0.5rem;
    border-radius: 0.5rem;
  }

  .match-schedule-picker__header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .match-schedule-picker__header .calendar-nav {
    justify-content: center;
    gap: 0.35rem;
  }

  .match-schedule-picker__header .calendar-nav .ghost {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
  }

  .match-schedule-picker__label {
    font-size: 0.95rem;
    text-align: center;
    font-weight: 600;
  }

  .match-schedule-picker__date-picker {
    margin-left: 0;
    width: 100%;
    display: none;
  }

  .match-schedule-picker__date-input {
    width: 100%;
    max-width: 180px;
    text-align: center;
    font-size: 0.9rem;
    padding: 0.5rem;
  }

  .match-schedule-picker__grid {
    margin-top: 0.35rem;
  }

  /* Estilos del picker de programación en móvil */
  .schedule-picker-courts {
    gap: 0.75rem;
  }

  .schedule-picker-court {
    padding: 0.6rem;
  }

  .schedule-picker-court__header {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .schedule-picker-slots {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 0.4rem;
  }

  .schedule-picker-slot {
    padding: 0.5rem 0.35rem;
    min-height: 52px;
    touch-action: manipulation;
  }

  .schedule-picker-slot__time {
    font-size: 0.8rem;
  }

  .schedule-picker-slot__status {
    font-size: 0.6rem;
  }

  .schedule-picker-slot__info {
    font-size: 0.55rem;
  }

  /* Mejorar estilos del formulario de programación */
  .schedule-form {
    padding: 0;
  }

  .schedule-form__field {
    margin-bottom: 0.5rem;
  }

  .schedule-form__field--slots {
    margin-bottom: 0.75rem;
  }

  .schedule-form__field label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
  }

  .schedule-form .form-hint {
    font-size: 0.8rem;
    margin-top: 0.25rem;
  }

  .schedule-form__actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .schedule-form__actions button {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }

  .schedule-form__error {
    font-size: 0.85rem;
    padding: 0.5rem;
    margin: 0.5rem 0;
  }
}

@media (max-width: 380px) {
  .schedule-picker-slots {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.35rem;
  }

  .schedule-picker-slot {
    padding: 0.4rem;
    min-height: 44px;
  }

  .schedule-picker-slot__time {
    font-size: 0.7rem;
  }

  .schedule-picker-slot__status {
    font-size: 0.55rem;
  }

  .match-schedule-picker__label {
    font-size: 0.85rem;
  }
}

.match-schedule-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.match-schedule-actions .form-hint {
  margin: 0;
}

.calendar-day-schedule {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, 0.12);
  padding: 0.5rem;
}

.calendar-day-schedule__grid {
  display: grid;
  min-width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: calc(var(--radius-sm) - 2px);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.calendar-day-schedule__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr)
    repeat(var(--calendar-schedule-court-count, 1), minmax(150px, 1fr));
}

.calendar-day-schedule__row--header .calendar-day-schedule__cell {
  font-weight: 600;
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.calendar-day-schedule__cell {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  border-right: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 3.25rem;
  background: transparent;
  font-size: 0.82rem;
}

.calendar-day-schedule__cell--time {
  background: transparent;
  font-weight: 600;
  color: var(--text-secondary);
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calendar-day-schedule__cell--header {
  text-transform: none;
}

.calendar-day-schedule__cell--last-row {
  border-bottom: none;
}

.calendar-day-schedule__cell--last-column {
  border-right: none;
}

.calendar-day-schedule__row--body:nth-of-type(even) .calendar-day-schedule__cell {
  background: transparent;
}

.calendar-day-schedule__row--body:nth-of-type(even) .calendar-day-schedule__cell--time {
  background: transparent;
}

.calendar-day-schedule__empty {
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

.calendar-day-schedule__occupied {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.calendar-day-schedule__cell--occupied {
  background: rgba(220, 38, 38, 0.05);
}

.calendar-day-schedule__occupied-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.calendar-day-schedule__occupied-type {
  font-weight: 600;
  color: #dc2626;
  font-size: 0.85rem;
}

.calendar-day-schedule__occupied-subtitle {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-schedule-event {
  width: 100%;
}

@media (max-width: 640px) {
  #player-court-calendar-card.card,
  #court-calendar-card.card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 1.5rem;
  }

  #player-court-calendar-card .card-header,
  #court-calendar-card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  #player-court-calendar-card .calendar-nav,
  #court-calendar-card .calendar-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  #player-court-calendar-card .calendar-label,
  #court-calendar-card .calendar-label {
    font-size: 0.95rem;
  }

  #player-court-calendar-container .calendar-day--schedule,
  #court-calendar-container .calendar-day--schedule {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  #player-court-calendar-container .calendar-day-schedule,
  #court-calendar-container .calendar-day-schedule {
    padding: 0;
    background: transparent;
  }

  /* Estilos para slots de tiempo reducidos en todos los calendarios tipo horario en móvil */
  .calendar-day-schedule__row {
    grid-template-columns: 50px
      repeat(var(--calendar-schedule-court-count, 1), minmax(140px, 1fr));
  }

  .calendar-day-schedule__cell {
    padding: 0.5rem 0.45rem;
    min-height: 3rem;
  }

  .calendar-day-schedule__cell--time {
    padding: 0.3rem 0.25rem;
    font-size: 0.62rem;
    letter-spacing: 0;
    line-height: 1.1;
    white-space: nowrap;
    max-width: 50px;
    width: 50px;
    min-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
  }
}

.calendar-day-schedule__unassigned {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}

.calendar-day-schedule__unassigned-title {
  font-weight: 600;
  color: var(--text-secondary);
}

.calendar-day-schedule__unassigned-list {
  display: grid;
  gap: 0.75rem;
}

.calendar-event strong {
  font-size: 0.9rem;
}

.calendar-event .meta {
  font-size: 0.75rem;
}

.calendar-day-schedule__slot-button {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent-strong);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.calendar-day-schedule__slot-button:hover,
.calendar-day-schedule__slot-button:focus-visible {
  background: rgba(37, 99, 235, 0.16);
  border-color: rgba(37, 99, 235, 0.55);
  color: var(--accent-strong);
}

.calendar-day-schedule__slot-button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.calendar-day-schedule__slot-button.is-selected {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

.calendar-day-schedule__slot-button.is-selected:hover,
.calendar-day-schedule__slot-button.is-selected:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

.calendar-event-subtitle {
  color: var(--text-secondary);
}

.calendar-event-notes {
  color: #4b5563;
  font-style: italic;
}

.calendar-event-actions {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.calendar-event-actions button {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

.calendar-event.pending {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.22);
}

.calendar-event.confirmed {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.22);
}

.calendar-empty {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.enrollment-player {
  display: grid;
  gap: 0.3rem;
}

.enrollment-meta {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.match-proposal {
  margin-top: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.12);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  :root {
    --card-shadow: 0 20px 46px rgba(15, 23, 42, 0.08);
  }

  .club-layout {
    grid-template-columns: 1fr;
  }

  .app-shell {
    display: block;
    min-height: 0;
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.35rem;
  }

  .mobile-topbar__brand {
    gap: 0.65rem;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .mobile-menu-close {
    display: inline-flex;
    position: sticky;
    top: 0;
    margin-left: auto;
    margin-bottom: 0;
    z-index: 2;
  }

  .app-header {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 82vw);
    max-width: 360px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    border-right: none;
    border-bottom: none;
    padding: 0.35rem 1.5rem 3.5rem;
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));
    box-shadow: var(--card-shadow);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100vh;
    max-height: 100vh;
    background: var(--card-bg);
    border-radius: 0 24px 24px 0;
  }

  .app-header.sidebar--mobile-open {
    transform: translateX(0);
  }

  .app-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-header__brand {
    display: none;
  }

  .mobile-menu-logo {
    width: 112px;
    height: 112px;
    border-radius: 0 !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 0.25rem;
    box-shadow: none;
    flex-shrink: 0;
  }

  .app-switcher {
    width: min(100%, 280px);
    min-width: 0;
    margin: 0 auto 0.75rem;
    padding: 0.25rem;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    flex-shrink: 0;
  }

  .app-switcher::before {
    background: #ffffff;
    border: 1px solid #cbd5e1;
  }

  .app-switcher__button {
    width: 100%;
    justify-content: center;
    padding: 0.7rem 0.8rem;
    font-size: 1rem;
    gap: 0.45rem;
  }

  .main-menu {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 0 0.35rem calc(2.5rem + env(safe-area-inset-bottom));
  }

  .main-menu__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
  }

  .main-menu__list--mobile-footer {
    display: flex;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
  }

  .menu-mobile-footer-item {
    display: flex;
  }

  .menu-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }

  .menu-button {
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
    padding: 0.85rem 1rem;
    border-radius: 20px;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    font-size: 1.08rem;
    font-weight: 700;
  }

  .menu-button.active {
    background: linear-gradient(180deg, #dbe4ff 0%, #d5defc 100%);
    border-color: rgba(191, 219, 254, 0.9);
    color: #24468d;
  }

  .menu-group--expanded > .menu-button {
    color: #24468d;
  }

  .menu-group--expanded > .menu-submenu,
  .menu-group--expanded > .menu-submenu[hidden] {
    position: static;
    display: block !important;
    min-width: 0;
    padding: 0.05rem 0 0.2rem 0;
    margin-top: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .menu-submenu__list {
    display: grid;
    gap: 0.35rem;
    padding-left: 0.85rem;
  }

  .menu-submenu .menu-button {
    padding: 0.78rem 0.95rem;
    border-radius: 16px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(191, 219, 254, 0.75);
    color: #4a5d79;
    font-size: 0.96rem;
    font-weight: 600;
  }

  .menu-button__icon {
    width: 1.1rem;
    height: 1.1rem;
    opacity: 0.9;
  }

  .menu-button .menu-label {
    text-align: left;
  }

  .app-main {
    padding: 0 0.75rem 2.75rem;
  }

  .mobile-topbar + .banner {
    margin-top: 0.5rem;
  }
}

@media (max-width: 640px) {
  :root {
    --bg-primary: #f6f7fb;
    --bg-secondary: #eef2ff;
    --card-bg: transparent;
    --card-border: transparent;
    --card-shadow: none;
    --radius-lg: 22px;
    --radius-md: 18px;
    --radius-sm: 12px;
  }

  body {
    background: var(--bg-primary);
    min-height: 100dvh;
  }

  .app-header {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  }

  .layout {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    gap: 1.75rem;
  }

  .modal-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    background: #ffffff;
    border: none;
    box-shadow: none;
  }

  .modal-header {
    padding: 1rem 1.25rem;
    gap: 0.75rem;
  }

  #modal-close {
    margin-left: auto;
    color: #ef4444;
    width: 2rem;
    height: 2rem;
    font-size: 1.3rem;
  }

  .modal-body {
    padding: 1rem 1.25rem;
  }

  .auth-view {
    padding: 1.5rem 1.25rem 0;
  }

  .auth-card {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: grid;
    gap: 1.5rem;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
  }

  .auth-header {
    text-align: center;
    display: grid;
    gap: 0.45rem;
  }

  .auth-header h1 {
    font-size: 2.2rem;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .auth-header p {
    margin: 0 auto;
    max-width: 32ch;
    font-size: 0.95rem;
    color: var(--text-secondary);
  }

  .tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem;
    background: transparent;
    border-radius: 18px;
    box-shadow: none;
    border: none;
  }

  .tab-button {
    flex: 1;
    border-radius: 12px;
    padding: 0.85rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
  }

  .tab-button.active {
    background: var(--accent);
    color: #ffffff;
  }

  .form {
    background: transparent;
    border-radius: 18px;
    padding: 0;
    box-shadow: none;
    gap: 1rem;
  }

  label {
    font-size: 0.95rem;
    color: var(--text-primary);
  }

  input,
  select,
  textarea {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: #f8fafc;
  }

  .checkbox-option {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fafc;
    padding: 0.85rem;
  }

  .checkbox-option.remember-option {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .primary,
  .secondary,
  .ghost {
    width: 100%;
    border-radius: 12px;
  }

  .primary {
    padding: 0.95rem;
  }

  .status-message {
    border-radius: 12px;
  }

  .dashboard-metrics,
  .calendar-day-list,
  .player-directory-controls {
    grid-template-columns: 1fr;
  }

  .mobile-topbar {
    padding: 0.5rem 0.75rem 0.75rem;
    background: #ffffff; /* Fondo blanco en móvil */
    position: relative; /* necesario para el pseudo-elemento */
    border-bottom: none;
  }

  /* Borde inferior con degradado */
  .mobile-topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px; /* grosor del borde */
    background: linear-gradient(90deg, #b9f66d 0%, #7dd13a 40%, #1d4ed8 100%);
    pointer-events: none;
  }

  .mobile-topbar__brand {
    gap: 0.75rem;
  }

  .mobile-topbar__actions {
    display: inline-flex;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    border: none;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 0.6rem 0.95rem;
    box-shadow: var(--card-shadow);
    color: var(--text-primary);
  }

  .mobile-menu-close {
    border-radius: 12px;
  }

  .mobile-menu-backdrop {
    background: rgba(15, 23, 42, 0.28);
  }

  .app-header {
    width: min(340px, 86vw);
    max-width: 360px;
    border-radius: 0 24px 24px 0;
  }

  .app-main {
    padding: 0 0.75rem 2.5rem;
    display: grid;
    gap: 1.5rem;
  }

  .app-header__utility {
    display: none;
  }

  .desktop-utility-only {
    display: none;
  }

  .notification-popover {
    top: 5.4rem;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-height: calc(100vh - 7rem);
    border-radius: 22px;
  }

  .notification-popover__header,
  .notification-popover__footer,
  .notification-popover__item {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .app-section {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .card {
    margin-bottom: 1.75rem;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .form-actions,
  .match-actions,
  .tournament-bracket-actions,
  .tournament-bracket-admin-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .form-actions > *,
  .match-actions > *,
  .tournament-bracket-actions > *,
  .tournament-bracket-admin-actions > * {
    width: 100%;
  }

  .club-summary,
  .club-details section {
    padding: 1.1rem;
    border-radius: 16px;
  }

  .table-scroll {
    padding-bottom: 0.5rem;
  }

  .table th,
  .table td {
    padding: 0.75rem 0.65rem;
  }

  /* Mejorar visualización de calendarios de partidos en móvil */
  .calendar-day {
    padding: 1.25rem 1.1rem;
    gap: 0.85rem;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  }

  .calendar-day-header {
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  }

  .calendar-day-header strong {
    font-size: 1.3rem;
    font-weight: 700;
  }

  .calendar-day-header span {
    font-size: 0.95rem;
  }

  .calendar-event {
    padding: 0.85rem 0.95rem;
    gap: 0.5rem;
    border-radius: 14px;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .calendar-event strong {
    font-size: 1.05rem;
    line-height: 1.4;
  }

  .calendar-event .meta {
    font-size: 0.88rem;
    line-height: 1.4;
  }

  /* Calendario tipo horario (schedule) en móvil */
  .calendar-day--schedule {
    padding: 1.25rem 1.1rem;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  }

  .calendar-day--schedule .calendar-day-header strong {
    font-size: 1.35rem;
  }

  .calendar-day--schedule .calendar-day-header span {
    font-size: 1rem;
  }

  .calendar-day--schedule .calendar-day-schedule__header {
    padding: 0.65rem 0.5rem;
  }
}

@media print {
  body {
    background: #ffffff;
  }

  .main-menu,
  .banner,
  #section-admin,
  #section-account,
  #section-notifications,
  #section-matches,
  #section-categories,
  #section-calendar {
    display: none !important;
  }
}

.court-reservations-layout {
  display: grid;
  gap: 1.5rem;
}

#court-calendar-card {
  grid-column: 1 / -1;
}

.court-reservation-item {
  position: relative;
}

.court-reservation-item--pending {
  border-style: dashed;
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.08);
}

.court-reservation-item--cancelled {
  opacity: 0.65;
  background: #f8fafc;
  border-style: dashed;
}

.court-reservation-item--cancelled strong {
  text-decoration: line-through;
}

.reservation-notes {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: rgba(37, 99, 235, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}

.reservation-actions,
.court-schedule-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.reservation-modal-form {
  display: grid;
  gap: 1rem;
}

.reservation-modal-form .form-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .reservation-modal-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.reservation-game-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.reservation-game-type-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
}

.reservation-participant-search-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.reservation-participant-search-wrapper input {
  width: 100%;
}

.reservation-participant-results {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
}

.reservation-participants-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  min-height: 2.2rem;
  margin-top: 0.5rem;
}

.reservation-participants-empty {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.reservation-participant-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  line-height: 1.2;
}

.reservation-participant-chip__label {
  white-space: nowrap;
}

.reservation-participant-chip__remove {
  border: none;
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.reservation-participant-chip__remove:hover,
.reservation-participant-chip__remove:focus {
  text-decoration: underline;
}

.reservation-participant-suggestion {
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.reservation-participant-suggestion:hover,
.reservation-participant-suggestion.is-highlighted {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.reservation-participant-suggestion--empty {
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: default;
}

.reservation-participants-grid {
  display: grid;
  gap: 0.75rem;
}

.reservation-participants-grid--doubles {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.reservation-participant-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.reservation-participant-field select {
  width: 100%;
}

.reservation-form-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.court-availability-item {
  display: grid;
  gap: 0.5rem;
}

.court-availability-slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.court-availability-slot--pending {
  font-weight: 600;
  color: #1d4ed8;
}

.court-availability-slot span:first-child {
  font-weight: 600;
  color: var(--text-primary);
}

.court-availability-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(245, 158, 11, 0.14);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.32);
}

.court-schedule {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  padding: 1.2rem 1.4rem;
  display: grid;
  gap: 0.75rem;
}

.court-schedule h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.court-schedule-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.court-schedule-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.court-schedule-row--block {
  background: rgba(245, 158, 11, 0.12);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 158, 11, 0.28);
  padding: 0.75rem 0.85rem;
}

.court-schedule-row--block .court-schedule-info {
  color: #92400e;
}

.court-schedule-row--block .court-schedule-info span:first-child {
  color: #7c2d12;
}

.court-schedule-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.court-schedule-info span:first-child {
  font-weight: 600;
  color: var(--text-primary);
}

.court-block-item {
  display: grid;
  gap: 0.5rem;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0.9rem 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.court-block-item__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}

.court-block-item__header strong {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.court-block-item__schedule,
.court-block-item__courts,
.court-block-item__notes {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.court-block-item__notes {
  font-style: italic;
}

.court-block-item__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* ================================================================
   Cuadrícula de gestión de pistas (Administración)
   ================================================================ */

/* Formulario de bloqueo de pistas */
.court-block-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.court-block-form__section {
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  padding: 1.25rem 1.25rem 1rem;
  margin: 0;
  background: var(--bg-secondary, #f8fafc);
}

.court-block-form__section--recurring {
  background: #fefce8;
  border-color: #fde68a;
}

.court-block-form__legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.5rem;
}

.court-block-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.court-block-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.court-block-form__field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
}

.court-block-form__field select,
.court-block-form__field input,
.court-block-form__field textarea {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--input-border, #cbd5e1);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.9rem;
  background: #fff;
  transition: border-color 0.15s;
}

.court-block-form__field select:focus,
.court-block-form__field input:focus,
.court-block-form__field textarea:focus {
  border-color: var(--accent, #3b82f6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.court-block-form__field select[multiple] {
  min-height: 72px;
}

.court-block-form__toggle {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--card-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-secondary, #f8fafc);
}

.court-block-form__toggle-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.court-block-form__toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #3b82f6);
}

.court-block-form__toggle-hint {
  font-size: 0.8rem;
  color: var(--text-secondary, #64748b);
  margin-left: 2.1rem;
}

@media (max-width: 640px) {
  .court-block-form__row {
    grid-template-columns: 1fr;
  }
  .court-block-form__section {
    padding: 1rem 0.75rem;
  }
}

.court-admin-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.court-admin-nav input[type="date"] {
  font-size: 0.95rem;
  padding: 0.35rem 0.6rem;
}

.court-grid-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}

.court-grid-legend__item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.court-grid-legend__item::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.court-grid-legend__item--free::before {
  background: #dcfce7;
  border: 1px solid #86efac;
}
.court-grid-legend__item--reserved::before {
  background: #dbeafe;
  border: 1px solid #93c5fd;
}
.court-grid-legend__item--match::before {
  background: #ede9fe;
  border: 1px solid #c4b5fd;
}
.court-grid-legend__item--blocked::before {
  background: #fef3c7;
  border: 1px solid #fcd34d;
}
.court-grid-legend__item--selected::before {
  background: #e0f2fe;
  border: 2px solid #0284c7;
}

.court-grid-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0.5rem;
}

.court-grid {
  display: grid;
  grid-template-columns: minmax(60px, 80px) repeat(var(--court-grid-cols, 9), minmax(100px, 1fr));
  gap: 3px;
  min-width: 500px;
}

.court-grid__corner {
  background: var(--bg-secondary, #f8fafc);
  padding: 0.5rem;
  font-weight: 600;
  font-size: 0.8rem;
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 2px solid var(--card-border, #e2e8f0);
  border-radius: 6px 0 0 0;
}

.court-grid__time-header {
  background: var(--bg-secondary, #f8fafc);
  padding: 0.5rem 0.25rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-secondary, #64748b);
  border-radius: 6px 6px 0 0;
}

.court-grid__court-label {
  background: var(--bg-secondary, #f8fafc);
  padding: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 2px solid var(--card-border, #e2e8f0);
}

.court-grid__cell {
  padding: 0.5rem 0.35rem;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.75rem;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  font-weight: 500;
}

.court-grid__cell:active {
  transform: scale(0.97);
}

.court-grid-cell--free {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}
.court-grid-cell--free:hover {
  background: #dcfce7;
  box-shadow: inset 0 0 0 2px #22c55e;
}

.court-grid-cell--reserved {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
.court-grid-cell--reserved:hover {
  background: #dbeafe;
  box-shadow: inset 0 0 0 1px #60a5fa;
}

.court-grid-cell--match {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #5b21b6;
}
.court-grid-cell--match:hover {
  background: #ede9fe;
  box-shadow: inset 0 0 0 1px #a78bfa;
}

.court-grid-cell--blocked {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.court-grid-cell--blocked:hover {
  background: #fef3c7;
  box-shadow: inset 0 0 0 1px #f59e0b;
}

.court-grid-cell--selected {
  background: #e0f2fe !important;
  border: 2px solid #0284c7 !important;
  box-shadow: inset 0 0 0 1px #0284c7;
  color: #0369a1 !important;
}

/* Estilos para sección de reservas de socios */
.court-grid__cell--free {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  cursor: pointer;
}
.court-grid__cell--free:hover {
  background: #dcfce7;
  box-shadow: inset 0 0 0 2px #22c55e;
}

.court-grid__cell--reserved {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  cursor: default;
}

.court-grid__cell--league {
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  color: #7c3aed;
}

.court-grid__cell--tournament {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #ea580c;
}

.court-grid__cell--private {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
}

.court-grid__cell--blocked {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  cursor: not-allowed;
}

.court-grid__cell--past {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

.court-grid__cell--unavailable {
  background: #fefce8;
  border: 1px solid #fef08a;
  color: #a16207;
  cursor: not-allowed;
}

/* Contenido de las celdas */
.court-grid-cell__type {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
  white-space: nowrap;
}

.court-grid-cell__name {
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Barra de acciones de selección */
.court-admin-selection-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.08), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-radius: var(--radius-md, 8px);
  font-size: 0.9rem;
  font-weight: 500;
}

.court-admin-selection-bar .primary {
  margin-left: auto;
}

/* Responsive */
@media (max-width: 640px) {
  .court-grid {
    min-width: 500px;
    font-size: 0.65rem;
  }
  .court-grid__cell {
    min-height: 40px;
    padding: 0.3rem 0.2rem;
    font-size: 0.65rem;
  }
  .court-admin-nav {
    gap: 0.5rem;
  }
  .court-admin-selection-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
  }
}

/* ================================================================
   Vista móvil de reservas de pistas
   ================================================================ */
.court-mobile-view {
  display: none;
}

.court-admin-mobile-view {
  display: none;
}

/* Mostrar vista móvil y ocultar grid en pantallas pequeñas (solo reservas) */
@media (max-width: 768px) {
  /* En la sección de reservas, ocultar grid y mostrar vista móvil */
  #section-court-reservations .court-grid-wrapper {
    display: none;
  }
  .court-mobile-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* En la sección de administración, ocultar grid y mostrar vista móvil de tarjetas */
  #section-court-admin .court-grid-wrapper {
    display: none;
  }
  .court-admin-mobile-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

/* Estilo de selección para slots móviles de admin */
.court-mobile-slot--selected {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.3);
  color: #0369a1 !important;
}

/* Cada pista como tarjeta */
.court-mobile-card {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.court-mobile-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, var(--bg-secondary, #f8fafc), rgba(241, 245, 249, 0.6));
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.court-mobile-card__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary, #1e293b);
  margin: 0;
}

.court-mobile-card__sport {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.court-mobile-card__body {
  padding: 0.75rem;
}

/* Lista de slots de tiempo */
.court-mobile-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 0.5rem;
}

.court-mobile-slot {
  padding: 0.55rem 0.4rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.court-mobile-slot__time {
  font-weight: 700;
  font-size: 0.85rem;
}

.court-mobile-slot__status {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

/* Estados de los slots */
.court-mobile-slot--free {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
  cursor: pointer;
}
.court-mobile-slot--free:hover,
.court-mobile-slot--free:active {
  background: #dcfce7;
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.court-mobile-slot--reserved {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.court-mobile-slot--match {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #5b21b6;
}

.court-mobile-slot--tournament {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #ea580c;
}

.court-mobile-slot--blocked {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.court-mobile-slot--past {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #9ca3af;
}

.court-mobile-slot--unavailable {
  background: #fefce8;
  border-color: #fef08a;
  color: #a16207;
}

/* Texto adicional en slots ocupados */
.court-mobile-slot__info {
  font-size: 0.6rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0.9;
}

/* Leyenda en móvil */
@media (max-width: 768px) {
  .court-grid-legend {
    justify-content: flex-start;
    gap: 0.6rem 1rem;
    font-size: 0.75rem;
  }
  .court-grid-legend__item::before {
    width: 12px;
    height: 12px;
  }
  
  /* Navegación de fecha más compacta */
  .court-admin-nav {
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .court-admin-nav input[type="date"] {
    flex: 1;
    min-width: 0;
    max-width: 150px;
  }
}

/* Estado vacío móvil */
.court-mobile-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-secondary, #64748b);
  font-size: 0.9rem;
}

/* Tarjeta de reservas del usuario - mejoras móviles */
@media (max-width: 768px) {
  #court-reservations-my-reservations-card .list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem;
  }
  #court-reservations-my-reservations-card .list-item__content {
    gap: 0.5rem;
  }
  #court-reservations-my-reservations-card .list-item__content strong {
    font-size: 0.95rem;
    line-height: 1.3;
  }
  #court-reservations-my-reservations-card .meta {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  #court-reservations-my-reservations-card .actions {
    width: 100%;
    justify-content: stretch;
  }
  #court-reservations-my-reservations-card .actions button {
    flex: 1;
  }
}

/* Grid de dos columnas para días y horarios */

@media (max-width: 768px) {
  
  /* Dashboard: convertir grid de 2 columnas a 1 en móvil */
  #section-dashboard > div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Dashboard: forzar ancho completo para tarjetas en móvil */
  #section-dashboard > div[style*="grid-template-columns: 1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Ajustar tarjetas de torneos y ligas en móvil */
  .dashboard-card-item {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .dashboard-card-poster {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  
  /* Ajustar grid de detalles en móvil */
  .dashboard-tournament-details {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .dashboard-tournament-details dt {
    font-weight: 600;
    margin-top: 0.25rem;
  }
}

/* Contenedores de toggles de días y horarios */
.day-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.day-toggles .toggle-button {
  min-width: 48px;
  text-align: center;
  padding: 0.5rem 0.75rem;
}

.timeslots-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.timeslots-toggles .toggle-button {
  text-align: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

/* Toggle buttons para días y horarios */

.toggle-button {
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.toggle-button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.toggle-button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.toggle-button:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.toggle-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Paginación para lista de bloqueos */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.pagination-info {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

@media (max-width: 768px) {
  .pagination {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* League My Matches List */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  margin-bottom: 0.5rem;
}

.list-item-button {
  flex: 1;
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.list-item-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.list-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.list-item-meta span {
  display: inline-block;
}

.list-item-meta .link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.list-item-meta .link:hover {
  text-decoration: underline;
}

.list-item-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.list-item-actions button.small {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}

/* Email Templates */
.email-template-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  margin-bottom: 0.75rem;
}

.email-template-item__content {
  flex: 1;
  min-width: 0;
}

.email-template-item__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.email-template-item__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.email-template-item__subject {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.email-template-item__description {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.email-template-item__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.tag--inactive {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.tag--system {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

/* Notificaciones agrupadas por categoría */
.notifications-group {
  margin-bottom: 2rem;
}

.notifications-group:last-child {
  margin-bottom: 0;
}

.notifications-group-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notification-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.notification-status-pill--pending {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}

.notification-status-pill--read {
  background: rgba(13, 148, 136, 0.14);
  color: #0f766e;
}

.notification-list-item--read {
  opacity: 0.82;
}

.notifications-group .list {
  margin-top: 0;
}

.notifications-group .empty-state {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  padding: 1rem;
}

#notifications-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Responsive */

@media (max-width: 768px) {
  
  .card-header .card-actions {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  
  .card-header .card-actions button:not(.view-toggle button) {
    order: 1;
  }
}

.info-box {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin: 1rem 0;
}

.info-box h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--accent-strong);
}

.info-box p {
  margin: 0.5rem 0;
}

/* Aviso de Playtomic para partidos por programar */
.info-box.playtomic-notice {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(220, 38, 38, 0.08));
  border: 2px solid rgba(220, 38, 38, 0.6);
  margin: 0 0 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
}

.info-box.playtomic-notice p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.4;
  font-weight: 500;
}

/* Aviso de fusión de categorías en el dashboard inicial */

.info-box ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.info-box code {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.tag--inactive {
  background: #ff4444;
  color: white;
}

.tag--system {
  background: #9e9e9e;
  color: white;
}

/* Estilos para vista previa de notificación push */

.form-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

/* Asegurar que dashboard-grid use grid en pantallas grandes */
@media (min-width: 769px) {
  .dashboard-grid {
    display: grid !important;
    gap: 2rem;
  }
}

/* Media Queries para mejorar visualización móvil */
@media (max-width: 768px) {
  /* Ajustar grid a 1 columna en móvil */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Tarjetas de torneos en columna en móvil */
  .tournament-card {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Ajustar tamaño de fuente en móvil */
  .tournament-card h4 {
    font-size: 1.125rem !important;
  }
  
  .tournament-card .tag {
    font-size: 0.7rem !important;
  }
}

@media (max-width: 480px) {
  /* Ajustes adicionales para pantallas muy pequeñas */
  .collection-card {
    padding: 0.75rem !important;
  }
  
  .tournament-card {
    gap: 1rem !important;
  }
  
  /* Títulos más pequeños */
  h2 {
    font-size: 1.25rem !important;
  }
  
  h3 {
    font-size: 1.125rem !important;
  }
}

/* ==================== MIS PARTIDOS ==================== */

/* Dashboard de Mis Partidos: dos columnas en escritorio, apilado en móvil */
@media (min-width: 900px) {
  #my-matches-dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #my-matches-dashboard-grid.my-matches--league-only {
    grid-template-columns: 1fr;
  }
  #my-tournament-scheduled-block {
    grid-column: 1;
    grid-row: 1;
  }
  #my-league-scheduled-block {
    grid-column: 2;
    grid-row: 1;
  }
  #my-tournament-to-programme-block {
    grid-column: 1;
    grid-row: 2;
  }
  #my-league-to-programme-block {
    grid-column: 2;
    grid-row: 2;
  }
  #my-tournament-finished-block {
    grid-column: 1;
    grid-row: 3;
  }
  #my-league-finished-block {
    grid-column: 2;
    grid-row: 3;
  }
  #my-matches-dashboard-grid.my-matches--league-only #my-league-scheduled-block,
  #my-matches-dashboard-grid.my-matches--league-only #my-league-to-programme-block,
  #my-matches-dashboard-grid.my-matches--league-only #my-league-finished-block {
    grid-column: 1;
  }
  .dashboard-league-block {
    margin: 0 0 1.5rem 0 !important;
    width: 100%;
    max-width: 100%;
  }
}

/* Badge dentro del título */
#my-matches-dashboard-grid .card-header h3 .badge {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

/* Badge circular verde para partidos programados de liga */
.badge-green-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}

/* Badge circular verde para el check de asistencia confirmada junto al nombre del jugador */
.my-match-attendance-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* Variante roja del badge de asistencia, para asistencia rechazada */
.my-match-attendance-check--rejected {
  background: #ef4444;
}

/* Badge circular rojo para partidos de torneo por programar */
.badge-red-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}

/* Badge circular azul para partidos finalizados */
.badge-blue-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  background: #3b82f6;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}

/* Asegurar que el card-header permita flexbox para alinear a la derecha */
#my-league-scheduled-block .card-header,
#my-league-to-programme-block .card-header,
#my-tournament-to-programme-block .card-header,
#my-tournament-scheduled-block .card-header,
#my-tournament-finished-block .card-header,
#my-league-finished-block .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.match-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.match-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Estilo especial para partidos programados */
#league-scheduled-list .match-item,
#tournament-scheduled-list .match-item {
  border: 2px solid var(--primary-color);
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.12);
}

/* Bordes para partidos finalizados */
#league-finished-list .match-item,
#tournament-finished-list .match-item {
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.match-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.match-info {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.match-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
  width: 100%;
  box-sizing: border-box;
}

.match-title strong {
  font-size: 1rem;
  color: var(--text-primary);
}

.match-title .tag {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  background: var(--primary-color);
  color: white;
  border-radius: 4px;
}

.match-category {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.match-date {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--bg-primary);
  border-left: 3px solid var(--primary-color);
  border-radius: 4px;
  flex-wrap: wrap;
}

.match-date strong {
  font-size: 0.9375rem;
  color: var(--text-primary);
  flex: 1;
  min-width: fit-content;
}

.match-date span {
  font-size: 0.875rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.match-court {
  padding: 0.5rem 0.75rem;
  background: var(--bg-primary);
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.match-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 4px;
  font-size: 0.9375rem;
}

.match-result--win {
  background: rgba(34, 197, 94, 0.1);
  border-left: 3px solid #22c55e;
}

.match-result--win strong {
  color: #16a34a;
}

.match-result--loss {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
}

.match-result--loss strong {
  color: #dc2626;
}

.match-result span {
  color: var(--text-secondary);
}

.match-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.match-actions button.small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Información de competición (Liga/Torneo) */
.match-competition {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.match-competition .tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-weight: 600;
}

.match-competition .tag--league {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.match-competition .tag--tournament {
  background: rgba(168, 85, 247, 0.1);
  color: #9333ea;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.match-competition .tag--category {
  background: rgba(107, 114, 128, 0.1);
  color: #4b5563;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.match-players {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.my-match-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.my-match-teams__vs {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.my-match-team {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.my-match-team--self {
  justify-content: flex-start;
}

.my-match-team:not(.my-match-team--self) {
  justify-content: flex-end;
}

.my-match-team__avatars {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.my-match-team__names {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}

.my-match-team__names strong {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 600;
}

.my-match-team__separator {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.match-players strong {
  font-size: 1.125rem;
  color: var(--text-primary);
  font-weight: 600;
}

/* Modal para enlaces de calendario */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background: #ffffff;
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: #ffffff;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
  background: #ffffff;
}

.modal-body p {
  margin: 0 0 1rem 0;
  color: var(--text-secondary);
}

/* Modal de programación de partido */
.modal:has(.schedule-form) .modal-header,
.modal:has(.proposal-form) .modal-header {
  position: relative;
  padding-right: 3.5rem;
}

.modal:has(.schedule-form) .modal-header h2,
.modal:has(.proposal-form) .modal-header h2 {
  font-size: 1.4rem;
  line-height: 1.3;
}

.modal:has(.schedule-form) #modal-close,
.modal:has(.proposal-form) #modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  transition: background 0.2s ease, transform 0.2s ease;
}

.modal:has(.schedule-form) #modal-close:hover,
.modal:has(.proposal-form) #modal-close:hover {
  background: #dc2626;
  transform: scale(1.1);
  color: #ffffff;
}

/* Paginación */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.pagination-info {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 3rem;
  text-align: center;
}

.pagination-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 6px rgba(16, 185, 129, 0.3);
}

.pagination-controls button:hover:not(:disabled) {
  transform: scale(1.1);
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 5px 12px rgba(16, 185, 129, 0.4);
}

.pagination-controls button:active:not(:disabled) {
  transform: scale(0.95);
}

.pagination-controls button:disabled {
  cursor: not-allowed;
  background: #e5e7eb;
  color: #9ca3af;
  box-shadow: none;
}

/* Botón "Ver más resultados" en dashboard de ligas */
#league-enrolled-view-all {
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 3px 6px rgba(16, 185, 129, 0.3) !important;
  transition: all 0.2s ease !important;
}

#league-enrolled-view-all:hover:not(:disabled) {
  transform: scale(1.05);
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 5px 12px rgba(16, 185, 129, 0.4) !important;
}

#league-enrolled-view-all:active:not(:disabled) {
  transform: scale(0.95);
}

#league-enrolled-view-all:disabled {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  box-shadow: none !important;
}

/* Responsive móvil */
@media (max-width: 768px) {
  .match-item {
    padding: 0.75rem;
    gap: 0.5rem;
    margin-left: 0;
    margin-right: 0;
  }
  
  .match-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .match-title strong {
    font-size: 0.9375rem;
    max-width: 100%;
    word-wrap: break-word;
  }
  
  .match-title .tag {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
  }
  
  .match-category {
    font-size: 0.8125rem;
  }
  
  .match-date {
    padding: 0.625rem;
  }
  
  .match-date strong {
    font-size: 0.875rem;
    word-wrap: break-word;
  }
  
  .match-date span {
    font-size: 0.8125rem;
  }
  
  .match-court {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
  }
  
  .match-result {
    padding: 0.625rem;
    font-size: 0.875rem;
    gap: 0.5rem;
  }
  
  .match-actions {
    flex-direction: column;
    gap: 0.375rem;
  }
  
  .match-actions button {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
  }

  .my-match-teams {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .my-match-teams__vs {
    justify-self: center;
  }

  .my-match-team,
  .my-match-team:not(.my-match-team--self) {
    justify-content: flex-start;
  }
  
  .pagination-controls {
    gap: 0.75rem;
    padding-top: 0.75rem;
  }

  .pagination-controls button {
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
  }

  .pagination-info {
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {

  .match-item {
    padding: 0.625rem;
  }

  .match-title strong {
    font-size: 0.875rem;
  }

  .match-category {
    font-size: 0.75rem;
  }

  .pagination-controls button {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }

  .pagination-info {
    font-size: 0.75rem;
  }
}

/* ==================== FIN MIS PARTIDOS ====================

/* ==================== FORMULARIO REPORTE RESULTADOS MÓVIL ==================== */
@media (max-width: 600px) {
  /* Asegurar que el modal del formulario de resultados ocupe toda la pantalla */
  .modal-overlay {
    padding: 0 !important;
  }

  /* Ajustar la sección de resultados en móviles */
  .match-results-section {
    margin: 1.2rem 0;
    border: 2px solid var(--accent) !important;
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .match-results-header {
    grid-template-columns: minmax(110px, 2fr) repeat(3, minmax(50px, 1fr));
    gap: 0.5rem;
    padding: 0.85rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--accent) !important;
    color: #fff;
  }

  .match-results-row {
    grid-template-columns: minmax(110px, 2fr) repeat(3, minmax(50px, 1fr));
    gap: 0.5rem;
    padding: 0.85rem 0.75rem;
    background: #fff;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  }

  .player-name-input {
    font-size: 0.9rem !important;
    font-weight: 600;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
  }

  .set-input {
    padding: 0.5rem 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid #d1d5db;
    max-width: 100%;
  }

  .set-input-tiebreak {
    font-size: 0.9rem;
  }

  /* Optimizar el espacio del formulario en móvil */
  .modal-body .form {
    gap: 1rem;
  }

  .modal-body .form label {
    font-size: 0.9rem;
  }

  .modal-body .form input[type="text"],
  .modal-body .form textarea {
    font-size: 0.9rem;
  }

  .modal-body .form .form-hint {
    font-size: 0.8rem;
    margin-top: 0.25rem;
  }

  .calculated-winner {
    padding: 0.75rem 0.75rem;
    font-size: 0.9rem;
    background: #dbeafe;
    border: 1px solid var(--accent);
    border-radius: 8px;
    margin: 0.5rem 0;
  }

  /* Asegurar que los botones de acción se vean bien */
  .form-actions {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .form-actions button {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
  }
}

/* Para pantallas muy pequeñas, optimizar aún más */
@media (max-width: 400px) {
  .match-results-header {
    grid-template-columns: minmax(100px, 2.5fr) repeat(3, minmax(40px, 48px));
    font-size: 0.7rem;
    padding: 0.4rem 0.5rem;
  }

  .match-results-row {
    grid-template-columns: minmax(100px, 2.5fr) repeat(3, minmax(40px, 48px));
    padding: 0.6rem 0.5rem;
  }

  .player-name-input {
    font-size: 0.8rem !important;
    overflow-x: auto;
    white-space: nowrap;
  }

  .set-input {
    font-size: 0.85rem;
    padding: 0.25rem 0.1rem;
    max-width: 48px;
  }

  .set-input-tiebreak {
    font-size: 0.75rem;
  }
}
/* ==================== FIN FORMULARIO REPORTE RESULTADOS MÓVIL ====================

/* ==================== SLOT OCCUPANCY MODAL ==================== */

/* Celda clickeable en el calendario */
.calendar-day-schedule__cell--clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.calendar-day-schedule__cell--clickable:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.2);
}

.calendar-day-schedule__cell--clickable:focus {
  outline: 2px solid #dc2626;
  outline-offset: -2px;
}

/* Modal de ocupación de slot */
.modal--slot-occupancy .modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  animation: fadeIn 0.2s ease;
}

.modal--slot-occupancy .modal__dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  animation: slideUp 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.modal--slot-occupancy .modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.modal--slot-occupancy .modal__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.modal--slot-occupancy .modal__close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.modal--slot-occupancy .modal__close:hover {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-primary);
}

.modal--slot-occupancy .modal__body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.modal--slot-occupancy .modal__footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

/* Información del slot */
.slot-info {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(59, 130, 246, 0.08);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.slot-info p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.slot-info p:first-child {
  margin-top: 0;
}

.slot-info p:last-child {
  margin-bottom: 0;
}

.slot-info strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Secciones de ocupación */
.slot-occupancy-section {
  margin-bottom: 1.5rem;
}

.slot-occupancy-section:last-child {
  margin-bottom: 0;
}

.slot-occupancy-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(148, 163, 184, 0.2);
}

/* Tarjetas de ocupación */
.slot-occupancy-card {
  background: var(--card-bg);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.slot-occupancy-card:last-child {
  margin-bottom: 0;
}

.slot-occupancy-card--block {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.slot-occupancy-type {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.slot-occupancy-card--block .slot-occupancy-type {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.4);
}

.slot-occupancy-details {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.slot-occupancy-details strong {
  color: var(--text-primary);
  font-weight: 600;
}

.slot-occupancy-players {
  color: var(--text-primary);
  font-weight: 500;
}

.slot-occupancy-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Responsive */
@media (max-width: 640px) {
  .modal--slot-occupancy .modal__dialog {
    width: 95%;
    max-height: 90vh;
  }

  .modal--slot-occupancy .modal__header {
    padding: 1rem;
  }

  .modal--slot-occupancy .modal__body {
    padding: 1rem;
  }

  .modal--slot-occupancy .modal__footer {
    padding: 0.75rem 1rem;
  }

  .slot-info {
    padding: 0.75rem;
  }

  .slot-occupancy-card {
    padding: 0.75rem;
  }
}

/* ==================== FIN SLOT OCCUPANCY MODAL ====================

/* ==================== RESERVATION CREATED MODAL ==================== */

.reservation-created-modal {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.reservation-created-modal__message {
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0;
}

.reservation-created-modal__details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-primary);
}

.reservation-created-modal__details p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.reservation-created-modal__details strong {
  color: var(--text-primary);
}

.reservation-created-modal .match-calendar-actions {
  margin-top: 0.5rem;
}

/* ==================== FIN RESERVATION CREATED MODAL ====================

/* ============================================
   CHAT / MESSAGING STYLES
   ============================================ */

#section-messaging {
  overflow: hidden;
}

/* Sidebar */

/* Tabs */

/* Lists */

/* Sección de mensajes directos en lista unificada */

/* Lista unificada sin tabs */

/* Conversation item */

/* User search results */

#new-conversation-modal .modal-header .icon-only[data-close-modal] {
  color: var(--danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

#new-conversation-modal .modal-header .icon-only[data-close-modal]:hover {
  background: rgba(239, 68, 68, 0.16);
  color: #dc2626;
}

#new-conversation-modal #user-search-input {
  width: 100%;
}

@media (max-width: 768px) {
  #new-conversation-modal .modal-header .icon-only[data-close-modal] {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
  }
}

/* Main chat area */

/* Chat header */

/* Messages area */

.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 1rem;
}

.image-lightbox-overlay[hidden] {
  display: none;
}

.image-lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.image-lightbox-img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}

/* En móvil, siempre visible */

/* Reply bar cuando se está respondiendo */

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typing indicator */

/* Input area */

#messaging-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  padding: 0.5rem 0.5rem;
  font-size: 0.95rem;
  max-height: 120px;
  line-height: 1.4;
  height: auto;
  min-height: 36px;
  overflow-y: auto;
  transition: height 0.1s ease;
  font-family: inherit;
}

@media (max-width: 768px) {
  #messaging-input {
    font-size: 16px; /* Evita zoom en iOS */
    padding: 0.6rem 0.5rem;
  }
}

#messaging-input:focus {
  outline: none;
}

#messaging-send-btn {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#messaging-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Image preview */

#messaging-preview-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--danger, #ef4444);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

/* Info panel */

/* Información del canal en panel lateral */

/* Info de conversación 1-a-1 */

/* Date separator */

/* ============================================
   CHAT / MESSAGING - MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  /* Quitar padding del contenedor cuando el chat está visible */
  .app-main:has(#section-messaging:not([hidden])) {
    padding: 0;
  }

  #section-messaging {
    /* Altura calculada restando el topbar */
    height: calc(100dvh - 160px);
    height: calc(100svh - 160px);
    max-height: calc(100dvh - 160px);
    max-height: calc(100svh - 160px);
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  /* Estado por defecto: mostrar sidebar, ocultar main */

  /* Cuando hay chat activo: ocultar sidebar, mostrar main */

  /* Mostrar botón de volver en móvil */

  /* Ajustar altura del área de mensajes */

  /* Input area ajustes */

  /* Header del chat */

  /* Panel de info a pantalla completa */

  /* Conversaciones más compactas */

  /* Header del chat más compacto */
}

/* Asegurar que el botón back esté oculto en desktop */

/* Image lightbox */

@keyframes imgLightboxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================
   Botón flotante de WhatsApp
   ========================================== */
.whatsapp-floating-btn {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 999;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

.whatsapp-floating-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: #fff;
}

/* Posición izquierda configurable desde Administración > WhatsApp */
.whatsapp-floating-btn--left {
  right: auto;
  left: 24px;
}

@media (max-width: 600px) {
  .whatsapp-floating-btn {
    bottom: 80px;
    right: 16px;
    width: 50px;
    height: 50px;
  }

  .whatsapp-floating-btn--left {
    right: auto;
    left: 16px;
  }
}

/* ==========================================
   Floating Chat Widget
   ========================================== */

/* ---- Individual bubbles stack ---- */

/* Tooltip con último mensaje */

/* Avatar circular */

/* Badge de no leídos */

/* Botón cerrar burbuja */

@keyframes chatBubbleFadeIn {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ---- Mini Chat Window ---- */

@keyframes chatMiniSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Body panels */

/* Conversations list */

/* Messages */

/* Input area */

/* Responsive */

/* Schedule Grid Styles */
.match-schedule-picker__grid table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.25rem;
}

.schedule-grid-slot-button {
  padding: 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  cursor: pointer;
  width: 100%;
  font-size: 0.9rem;
  transition: all 0.2s;
  color: var(--text-secondary);
}

.schedule-grid-slot-button.is-selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 4px rgba(29, 78, 216, 0.2);
}

.schedule-grid-slot-button:hover:not(:disabled):not(.is-occupied) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Player Level Badge */
.player-level-badge {
  display: inline-block;
  width: 5.8rem;
  padding: 2px 0;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  border: 1px solid;
}

.player-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  transition: opacity 0.15s;
  text-decoration: none;
}

.player-contact-icon:hover {
  opacity: 0.75;
}

.player-contact-icon--whatsapp {
  color: #25d366;
}

.player-contact-icon--call {
  color: #1565c0;
}

.player-level-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.player-level-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid;
}

.player-level-stat--win {
  background: #e8f5e9;
  border-color: #a5d6a7;
  color: #2e7d32;
}

.player-level-stat--loss {
  background: #fce4ec;
  border-color: #ef9a9a;
  color: #c62828;
}

.player-level-stat__value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.player-level-stat__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Tabs de deportes en tarjeta de nivel */
.player-stats-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #9ca3af;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.player-stats-tab__icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(463%) hue-rotate(182deg) brightness(88%) contrast(89%);
}

.player-stats-tab:hover {
  color: #6b7280;
}

.player-stats-tab--active {
  color: #3b82f6;
  border-bottom: 2px solid #3b82f6;
}

.player-stats-tab--active .player-stats-tab__icon {
  filter: none;
}

/* ========================================
   RANKING DEL CLUB - MEJORAS VISUALES
   ======================================== */

/* Maximizar ancho en pantallas grandes */
#section-club-ranking {
  max-width: 100% !important;
  padding: 0 !important;
}

#club-ranking-card {
  max-width: 100% !important;
  margin: 0 auto 2rem auto;
  padding: 1.5rem;
}

@media (min-width: 1200px) {
  #section-club-ranking {
    padding: 0 2rem !important;
  }
  
  #club-ranking-card {
    max-width: 1600px !important;
    padding: 2rem;
  }
}

#club-ranking-table {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}

#club-ranking-table thead {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  color: white;
}

#club-ranking-table thead th {
  color: white !important;
  font-weight: 600;
  padding: 1rem;
  border-bottom: none;
  white-space: nowrap;
}

#club-ranking-table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid #e5e7eb;
}

#club-ranking-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

#club-ranking-table tbody tr:hover {
  background-color: #f3f4f6 !important;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#club-ranking-table tbody td {
  padding: 1rem;
  vertical-align: middle;
}

/* Responsive para el ranking */
@media (max-width: 768px) {
  #club-ranking-card {
    padding: 1rem;
  }
  
  #club-ranking-table {
    font-size: 0.875rem;
  }
  
  #club-ranking-table thead th,
  #club-ranking-table tbody td {
    padding: 0.75rem 0.5rem;
  }

  /* Mostrar labels cortos en mobile */
  #club-ranking-table thead th[data-label-mobile]::before {
    content: attr(data-label-mobile);
    display: block;
  }

  #club-ranking-table thead th[data-label-mobile] {
    font-size: 0;
  }

  #club-ranking-table thead th[data-label-mobile]::before {
    font-size: 0.875rem;
  }
}

/* Leyenda del ranking */

.ranking-columns-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0.25rem 0 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary, #64748b);
}

.ranking-columns-legend strong {
  color: var(--text-primary, #1f2937);
}

@media (max-width: 768px) {

  .ranking-columns-legend {
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
}

/* ─── Odoo Sync Stats Table ─────────────────────────────────────────────── */
.odoo-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.odoo-stats-table tbody tr {
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.odoo-stats-table tbody tr:last-child {
  border-bottom: none;
}

.odoo-stats-label {
  padding: 0.5rem 1rem 0.5rem 0;
  color: var(--color-text-muted, #6b7280);
  font-weight: 500;
  white-space: nowrap;
  width: 60%;
}

.odoo-stats-value {
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--color-text, #111827);
  text-align: right;
}

.odoo-stats-dry-run {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-muted, #6b7280);
}

/* === Eventos ocultos en frontend (reversible) === */
#home-events-card,
#dashboard-view-all-events,
#section-event-dashboard,
#section-events,
#section-event-players,
#section-event-payments,
#event-matches-preview-modal {
  display: none !important;
}


/* ==========================================================================
   Tema visual del club (mismo lenguaje que el panel de inicio)
   Va al final para imponerse a los estilos base. Los selectores con :where()
   no suman especificidad: los componentes propios del inicio (.home-*) siguen
   mandando sobre esta capa.
   ========================================================================== */
:root {
  --bg-primary: #f3f5fa;
  --bg-secondary: #eef1f7;
  --card-border: #e3e8f2;
  --card-shadow: 0 10px 24px -22px rgba(22, 34, 79, 0.6);
  --text-primary: #16224f;
  --text-secondary: #5b6478;
  --text-muted: #8a93ab;
  --accent: #3554f0;
  --accent-soft: #e8edfd;
  --accent-strong: #2443d6;
  --brand-navy: #19244d;
  --brand-lime: #dcf56b;
  --brand-lime-ink: #2f3d0a;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --focus-ring: 2px solid rgba(53, 84, 240, 0.35);
}

/* Títulos */
:where(#app-view) h1,
:where(#app-view) h2,
:where(#app-view) h3,
:where(#app-view) h4 {
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

:where(#app-view) .app-section h1 {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

:where(#app-view) .card-header h3 {
  font-size: 1.4rem;
  font-weight: 700;
}

:where(#app-view) .card-subtitle {
  color: var(--text-secondary);
}

/* Tarjetas: blancas, con marco y esquinas amplias también en móvil */
:where(#app-view) .card {
  padding: 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg) !important;
  background: #ffffff;
  box-shadow: var(--card-shadow);
}

:where(#app-view) .collection-card,
:where(#app-view) .list li:not(.list-heading):not(.match-category-header):not(.empty-state) {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: none;
}

:where(#app-view) .list li.match-category-header h4,
:where(#app-view) .list li.list-heading {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

:where(#app-view) .empty-state {
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

/* Botones */
:where(#app-view) .primary {
  padding: 0.75rem 1.3rem;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

:where(#app-view) .primary:hover,
:where(#app-view) .primary:focus-visible {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

:where(#app-view) .secondary,
:where(#app-view) .ghost {
  border: 1px solid #c9d3f5;
  border-radius: 14px;
  background: #ffffff;
  color: var(--accent);
  font-weight: 600;
}

:where(#app-view) .secondary:hover,
:where(#app-view) .secondary:focus-visible,
:where(#app-view) .ghost:hover,
:where(#app-view) .ghost:focus-visible {
  border-color: #c9d3f5;
  background: #eef2ff;
  color: var(--accent-strong);
}

:where(#app-view) .tab-button {
  border-radius: 12px;
}

:where(#app-view) .tab-button.active {
  border-color: var(--brand-navy);
  background: var(--brand-navy);
  color: #ffffff;
}

/* Etiquetas */
:where(#app-view) .tag {
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  background: #eef1f6;
  color: #4b5570;
  font-weight: 600;
}

:where(#app-view) .card-badge {
  border-radius: 10px;
  background: var(--brand-lime);
  color: var(--brand-lime-ink);
}

/* Métricas: el mismo juego de colores que las tarjetas del inicio */
:where(#app-view) .metric-card {
  position: relative;
  overflow: hidden;
  min-height: 7.5rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #3159f5 0%, #2443d6 100%);
  color: #ffffff;
  box-shadow: 0 14px 30px -20px rgba(22, 34, 79, 0.55);
}

:where(#app-view) .metric-card:nth-child(5n + 2) {
  background: linear-gradient(160deg, #3e7377 0%, #2b5059 100%);
}

:where(#app-view) .metric-card:nth-child(5n + 3) {
  background: linear-gradient(160deg, #5a4be0 0%, #3a35a8 100%);
}

:where(#app-view) .metric-card:nth-child(5n + 4) {
  border-color: rgba(120, 160, 20, 0.25);
  background: linear-gradient(160deg, #e4f98b 0%, #c6ea5c 100%);
  color: #2c3a06;
}

:where(#app-view) .metric-card:nth-child(5n + 5) {
  border-color: rgba(200, 90, 60, 0.25);
  background: linear-gradient(160deg, #ee9d80 0%, #e2785a 100%);
  color: #4a1c10;
}

:where(#app-view) .metric-card .metric-label,
:where(#app-view) .metric-card strong,
:where(#app-view) .metric-card__detail-label,
:where(#app-view) .metric-card__detail-total,
:where(#app-view) .metric-card__detail-line {
  color: inherit;
}

:where(#app-view) .metric-card .metric-label {
  font-size: 0.98rem;
  font-weight: 500;
  opacity: 0.95;
}

:where(#app-view) .metric-card strong {
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Tablas */
:where(#app-view) .table th {
  background: #f6f8fc;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

:where(#app-view) .table td {
  border-color: #edf0f7;
  color: var(--text-primary);
}

:where(#app-view) .table tbody tr:hover {
  background: #f4f6fd;
}

/* Formularios */
:where(#app-view, .modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  border: 1px solid #d9dfec;
  border-radius: 12px;
  background: #ffffff;
}

:where(#app-view, .modal) :is(input, select, textarea):focus {
  border-color: var(--accent);
  outline: 3px solid rgba(53, 84, 240, 0.18);
  outline-offset: 0;
}

/* Modales */
.modal {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(22, 34, 79, 0.55);
}

.modal-header {
  background: var(--brand-navy);
  border-bottom: 0;
}

.modal-header h2,
.modal-header .close-button,
.modal-header button {
  color: #ffffff;
}

/* Avisos */
:where(#app-view) .info-box {
  border-radius: var(--radius-md);
}

:where(#app-view) .pagination-controls button {
  border-radius: 10px;
}

/* Navegación */
:where(#app-view) .menu-button.active,
:where(#app-view) .menu-group--expanded > .menu-button {
  border-color: transparent;
  background: var(--brand-navy);
  color: #ffffff;
}

:where(#app-view) .menu-button--nested.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

@media (max-width: 640px) {
  :where(#app-view) .card {
    margin-bottom: 1.25rem !important;
    padding: 1rem;
  }
}

.modal-header .ghost,
.modal-header .secondary {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* Ranking completo: pestañas por categoría y una tarjeta por categoría con el formato del inicio */
.ranking-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}

.ranking-tabs::-webkit-scrollbar {
  display: none;
}

.ranking-tabs__tab {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  border: 1px solid #d9dfec;
  border-radius: 999px;
  background: #ffffff;
  color: #4b5570;
  font-weight: 600;
  white-space: nowrap;
}

.ranking-tabs__tab[aria-selected="true"] {
  border-color: #19244d;
  background: #19244d;
  color: #ffffff;
}

.ranking-board {
  padding: 1.25rem 1rem;
  border: 1px solid #e3e8f2;
  border-radius: 20px;
  background: #ffffff;
}

.home-ranking__meta {
  flex-basis: 100%;
  font-size: 0.88rem;
  color: #6b7489;
}

.ranking-board .home-ranking__name {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

@media (max-width: 480px) {
  .ranking-board {
    padding: 1rem 0.6rem;
  }
}

/* Colores de categoría en los rankings */
.home-ranking--colored {
  padding-top: 1rem;
  border-top: 4px solid var(--category-color);
}

.home-rankings__body > .home-ranking--colored:first-child,
.ranking-board .home-ranking--colored {
  padding-top: 0;
  border-top: 0;
}

.ranking-board {
  border-top: 5px solid var(--category-color, #e3e8f2);
}

.home-ranking__category {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 10px;
  background: var(--category-color-soft);
  color: var(--category-color);
  font-weight: 700;
}

.home-ranking__category::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--category-color);
}

.home-ranking--colored .home-ranking__row--leader {
  border-color: var(--category-color-border);
  background: var(--category-color-soft);
}

.home-ranking--colored .home-ranking__row:not(.home-ranking__row--leader):not(.home-ranking__row--head) .home-ranking__points {
  background: var(--category-color-soft);
  color: var(--category-color);
}

.ranking-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.ranking-tabs__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--category-color);
}

.ranking-tabs__tab[data-category-id][aria-selected="true"] {
  border-color: var(--category-color);
  background: var(--category-color);
}

.ranking-tabs__tab[aria-selected="true"] .ranking-tabs__dot {
  background: #ffffff;
}

/* ==========================================================================
   Panel de ligas: tarjetas de liga con el diseño del inicio
   ========================================================================== */
#league-active-summary.dashboard-highlight--single-league {
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
  background: none;
}

#league-active-summary .home-competitions__list {
  padding: 0;
}

.home-competition__tag--colored {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--category-color-soft);
  color: var(--category-color);
  font-weight: 600;
}

.home-competition__tag--colored::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--category-color);
}

.home-competition__tag--colored.home-competition__tag--highlight {
  outline: 2px solid var(--category-color);
  outline-offset: -2px;
}

.home-competition__note {
  margin: 0;
  font-size: 0.88rem;
  color: #6b7489;
}

.home-competition__action:disabled {
  cursor: default;
  opacity: 0.7;
}

@media (min-width: 900px) {
  .league-panel-card {
    grid-template-columns: minmax(14rem, 30%) minmax(0, 1fr);
  }

  .league-panel-card .home-competition__visual {
    min-height: 18rem;
  }

  .league-panel-card .home-competition__body {
    padding: 1.25rem 1.5rem;
  }
}

.league-progress {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #e3e8f2;
  border-radius: 14px;
  background: #f6f8fc;
  --progress-color: #3554f0;
}

.league-progress--done { --progress-color: #5d9a12; }
.league-progress--warning { --progress-color: #e8960c; }
.league-progress--danger { --progress-color: #e2483d; }

.league-progress__ring {
  position: relative;
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
}

.league-progress__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.league-progress__ring circle {
  fill: none;
}

.league-progress__track {
  stroke: #e3e8f2;
}

.league-progress__value {
  stroke: var(--progress-color);
  stroke-linecap: round;
  stroke-dasharray: var(--progress-circumference);
  stroke-dashoffset: var(--progress-offset);
}

.league-progress__ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #16224f;
}

.league-progress__copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.league-progress__copy strong {
  color: #16224f;
}

.league-progress__copy span {
  font-size: 0.88rem;
  color: #6b7489;
}

.league-progress__copy em {
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
  color: var(--progress-color);
}

/* ==========================================================================
   Animaciones: entrada de tarjetas, botones, marcos y barras de progreso.
   Se desactivan si el usuario prefiere reducir el movimiento.
   ========================================================================== */
@keyframes psm-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes psm-pop {
  0% { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: none; }
}

@keyframes psm-grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes psm-ring {
  from { stroke-dashoffset: var(--progress-circumference); }
  to { stroke-dashoffset: var(--progress-offset); }
}

@keyframes psm-shine {
  0%, 70% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(260%) skewX(-18deg); }
}

@keyframes psm-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 245, 107, 0); }
  50% { box-shadow: 0 0 0 6px rgba(220, 245, 107, 0.35); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Entrada escalonada de los bloques al abrir una sección */
  .app-section:not([hidden]) > .card,
  .app-section:not([hidden]) > article,
  .app-section:not([hidden]) .home-dashboard-grid > *,
  .app-section:not([hidden]) .dashboard-league-block,
  .home-stat,
  .home-score,
  .home-competition,
  .home-ranking,
  .ranking-board,
  .home-upcoming-match {
    animation: psm-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .home-stats > :nth-child(2),
  .home-scores__list > :nth-child(2),
  .home-competitions__list > :nth-child(2),
  .home-rankings__body > :nth-child(2),
  .home-dashboard-grid > :nth-child(2) { animation-delay: 0.06s; }
  .home-stats > :nth-child(3),
  .home-scores__list > :nth-child(3),
  .home-competitions__list > :nth-child(3),
  .home-rankings__body > :nth-child(3),
  .home-dashboard-grid > :nth-child(3) { animation-delay: 0.12s; }
  .home-stats > :nth-child(4),
  .home-scores__list > :nth-child(4),
  .home-dashboard-grid > :nth-child(4) { animation-delay: 0.18s; }
  .home-stats > :nth-child(5),
  .home-dashboard-grid > :nth-child(5) { animation-delay: 0.24s; }

  .home-ranking__row:not(.home-ranking__row--head) {
    animation: psm-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .home-ranking__row:nth-child(3) { animation-delay: 0.05s; }
  .home-ranking__row:nth-child(4) { animation-delay: 0.1s; }
  .home-ranking__row:nth-child(5) { animation-delay: 0.15s; }
  .home-ranking__row:nth-child(n + 6) { animation-delay: 0.2s; }

  /* Números y etiquetas destacadas */
  .home-stat__value,
  .home-score__sets,
  .home-ranking__leader-points strong,
  .home-upcoming-match__day {
    animation: psm-pop 0.5s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .home-score__row--winner .home-score__sets,
  .home-ranking__row--leader .home-ranking__points {
    animation: psm-pop 0.5s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both, psm-glow 2.4s 0.8s ease-in-out 2;
  }

  /* Barras y anillos de progreso que se rellenan */
  .home-competition__progress span {
    transform-origin: left center;
    animation: psm-grow-x 0.9s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .league-progress__value {
    animation: psm-ring 1.1s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Destello en los bloques azules destacados */
  .home-stat--enrollments::after,
  .home-ranking__leader::after,
  .home-ranking__view-all::after,
  .home-competition__action--primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    pointer-events: none;
    transform: translateX(-120%) skewX(-18deg);
  }

  .home-stat--enrollments::after,
  .home-ranking__leader::after {
    animation: psm-shine 5s 1s ease-in-out infinite;
  }

  .home-ranking__leader {
    position: relative;
    overflow: hidden;
  }

  .home-ranking__view-all,
  .home-competition__action--primary {
    position: relative;
    overflow: hidden;
  }

  .home-ranking__view-all:hover::after,
  .home-competition__action--primary:hover::after {
    animation: psm-shine 0.9s ease-out;
  }

  /* Botones: elevación al pasar y pulsación al tocar */
  .primary,
  .secondary,
  .ghost,
  .home-scores__all,
  .home-competition__action,
  .home-competitions__more,
  .ranking-tabs__tab,
  .home-ranking__view-all,
  .home-upcoming-match__action,
  .menu-button {
    transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .primary:hover:not(:disabled),
  .secondary:hover:not(:disabled),
  .ghost:hover:not(:disabled),
  .home-scores__all:hover,
  .home-competition__action:hover:not(:disabled),
  .ranking-tabs__tab:hover,
  .home-ranking__view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(53, 84, 240, 0.65);
  }

  .primary:active:not(:disabled),
  .secondary:active:not(:disabled),
  .home-competition__action:active:not(:disabled),
  .ranking-tabs__tab:active {
    transform: scale(0.96);
    box-shadow: none;
  }

  .home-competitions__more:hover::after {
    transform: translateX(3px);
  }

  .home-competitions__more::after {
    transition: transform 0.2s ease;
  }

  /* Marcos: las tarjetas se elevan y el borde toma color al pasar */
  .card,
  .home-competition,
  .home-score,
  .home-stat,
  .ranking-board,
  .collection-card,
  .home-ranking__row,
  .league-progress {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .home-competition:hover,
  .home-score:hover,
  .ranking-board:hover,
  .collection-card:hover {
    transform: translateY(-3px);
    border-color: #c9d3f5;
    box-shadow: 0 18px 34px -24px rgba(22, 34, 79, 0.55);
  }

  .home-stat:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 20px 36px -20px rgba(22, 34, 79, 0.6);
  }

  .home-ranking__row:not(.home-ranking__row--head):hover {
    transform: translateX(3px);
    border-color: var(--category-color, #c9d3f5);
  }

  .home-competition__visual img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .home-competition:hover .home-competition__visual img {
    transform: scale(1.04);
  }

  .home-stat__art {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .home-stat:hover .home-stat__art {
    transform: rotate(0deg) scale(1.08);
  }

  /* Ventanas emergentes */
  .modal-overlay:not([hidden]) .modal {
    animation: psm-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* Marcadores: los juegos de cada set aparecen uno tras otro y el ganador se ilumina */
@keyframes psm-score-in {
  0% { opacity: 0; transform: translateY(8px) scale(0.85); }
  100% { opacity: 1; transform: none; }
}

@keyframes psm-trophy {
  0% { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  60% { opacity: 1; transform: scale(1.2) rotate(8deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes psm-status {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 245, 107, 0.6); }
  50% { box-shadow: 0 0 0 5px rgba(220, 245, 107, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .home-score__games {
    animation: psm-score-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .home-score__row .home-score__games:nth-child(2) { animation-delay: 0.15s; }
  .home-score__row .home-score__games:nth-child(3) { animation-delay: 0.27s; }
  .home-score__row .home-score__games:nth-child(4) { animation-delay: 0.39s; }
  .home-score__row .home-score__games:nth-child(5) { animation-delay: 0.51s; }
  .home-score__row + .home-score__row .home-score__games { animation-duration: 0.45s; }

  .home-score__row .home-score__sets {
    animation-delay: 0.6s;
  }

  .home-score__trophy {
    animation: psm-trophy 0.6s 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .home-score__status {
    animation: psm-status 2.2s 0.4s ease-out 2;
  }

  .home-score__row {
    transition: background-color 0.2s ease;
  }

  .home-score__row:not(.home-score__row--head):hover {
    background: #f6f8fc;
  }
}

/* Partidos pendientes de resultado: acento naranja para distinguirlos de los programados */
.home-upcoming-match--pending {
  border-top-color: #e8774f;
}

.home-upcoming-match--pending .home-score__status {
  background: #ffe1d4;
  color: #8a2f12;
}

.home-upcoming-match--pending .home-upcoming-match__day {
  background: #e8774f;
  box-shadow: 0 10px 18px -12px rgba(232, 119, 79, 0.9);
}

@keyframes psm-vs {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

@media (prefers-reduced-motion: no-preference) {
  .home-upcoming-match__vs {
    animation: psm-vs 2.4s 0.6s ease-in-out 2;
  }

  .home-upcoming-match__team {
    animation: psm-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .home-upcoming-match__team + .home-upcoming-match__team {
    animation-delay: 0.12s;
  }

  .home-upcoming-match__action {
    transition: background-color 0.2s ease, padding-left 0.2s ease;
  }

  .home-upcoming-match__action:hover {
    padding-left: 1.4rem;
  }
}

/* Fichas de torneo en el panel de torneos: cuadros por categoría */
.tournament-panel-card {
  grid-template-columns: minmax(7.5rem, 32%) minmax(0, 1fr);
}

@media (min-width: 900px) {
  .tournament-panel-card {
    grid-template-columns: minmax(14rem, 30%) minmax(0, 1fr);
  }

  .tournament-panel-card .home-competition__body {
    padding: 1.25rem 1.5rem;
  }
}

.tournament-brackets {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.tournament-brackets__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7489;
}

.tournament-brackets__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem 0.65rem 0.9rem;
  border: 1px solid #e3e8f2;
  border-left: 4px solid var(--category-color, #3554f0);
  border-radius: 12px;
  background: #ffffff;
}

.tournament-brackets__info {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.tournament-brackets__info strong {
  color: #16224f;
}

.tournament-brackets__info span {
  font-size: 0.85rem;
  color: #6b7489;
}

.tournament-brackets__actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.4rem;
}

.tournament-brackets__button {
  padding: 0.45rem 0.75rem;
  border: 1px solid #c9d3f5;
  border-radius: 10px;
  background: #ffffff;
  color: #3554f0;
  font-size: 0.88rem;
  font-weight: 600;
}

.tournament-brackets__button--primary {
  border-color: #3554f0;
  background: #3554f0;
  color: #ffffff;
}

@media (max-width: 640px) {
  .tournament-panel-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .tournament-panel-card .home-competition__visual:not(.home-competition__visual--poster) {
    min-height: 9rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tournament-brackets__row {
    animation: psm-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .tournament-brackets__row:nth-child(3) { animation-delay: 0.06s; }
  .tournament-brackets__row:nth-child(4) { animation-delay: 0.12s; }
  .tournament-brackets__row:nth-child(n + 5) { animation-delay: 0.18s; }

  .tournament-brackets__row:hover {
    transform: translateX(3px);
  }

  .tournament-brackets__button {
    transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }

  .tournament-brackets__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -10px rgba(53, 84, 240, 0.7);
  }

  .tournament-brackets__button:active {
    transform: scale(0.95);
  }
}

/* ==========================================================================
   Mis partidos
   ========================================================================== */
.my-matches__intro {
  margin-bottom: 1.5rem;
}

.my-matches__title {
  margin: 0;
  font-size: clamp(1.8rem, 6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #16224f;
}

#section-my-matches .my-matches__empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem 1.1rem;
  padding: 1.4rem;
  border-top: 4px solid #3554f0;
}

.my-matches__empty h3 {
  margin: 0 0 0.3rem;
}

.my-matches__empty .primary {
  grid-column: 1 / -1;
  justify-self: start;
}

.my-matches__empty-icon {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 16px;
  background: #e8edfd;
  color: #3554f0;
}

.my-matches__empty-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

#section-my-matches .my-matches__block {
  padding: 0;
  overflow: hidden;
  border-top: 4px solid #3554f0;
}

#section-my-matches .my-matches__block--to-programme { border-top-color: #e8774f; }
#section-my-matches .my-matches__block--finished { border-top-color: #19244d; }

#section-my-matches .my-matches__block .card-header {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #e6eaf3;
  background: #f6f8fc;
}

#section-my-matches .my-matches__block .card-header h3 {
  font-size: 1.2rem;
}

#section-my-matches .my-matches__block .badge {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #3554f0;
  color: #ffffff;
  font-weight: 800;
}

#section-my-matches .my-matches__block--to-programme .badge { background: #e8774f; }
#section-my-matches .my-matches__block--finished .badge { background: #dcf56b; color: #2f3d0a; }

#section-my-matches .my-matches__block > .list,
#section-my-matches .my-matches__block > .home-scores__list {
  padding: 1rem;
}

#section-my-matches .my-matches__block > .pagination-controls {
  margin: 0 1rem 1rem;
}

/* Tarjeta de partido (programado o por programar) */
#section-my-matches .list > li.list-item {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

#section-my-matches .match-item {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe5f3;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 24px -20px rgba(22, 34, 79, 0.6);
}

#section-my-matches #tournament-scheduled-list .match-item {
  border: 1px solid #dfe5f3;
  border-top: 4px solid #3554f0;
}

#section-my-matches #tournament-to-programme-list .match-item {
  border-top: 4px solid #e8774f;
}

#section-my-matches .match-header {
  padding: 1rem;
  background: #19244d;
  color: #ffffff;
}

#section-my-matches .my-match-teams__vs {
  color: #dcf56b;
}

#section-my-matches .match-header .my-match-team,
#section-my-matches .match-header .my-match-team * {
  color: #ffffff;
}

#section-my-matches .match-competition {
  padding: 0.75rem 1rem 0;
}

#section-my-matches .match-competition .tag {
  border: 0;
  border-radius: 8px;
}

#section-my-matches .match-competition .tag--tournament {
  background: #dcf56b;
  color: #2f3d0a;
}

#section-my-matches .match-competition .tag--category {
  background: #eef1f6;
  color: #4b5570;
}

#section-my-matches .match-date {
  margin: 0.75rem 1rem 0;
  padding: 0.8rem 0.9rem;
  border: 0;
  border-left: 4px solid #3554f0;
  border-radius: 12px;
  background: #f1f4fc;
}

#section-my-matches .match-date strong {
  color: #16224f;
  text-transform: capitalize;
}

#section-my-matches .match-actions {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
}

#section-my-matches .match-actions button.small {
  border-radius: 12px;
}

@media (max-width: 480px) {
  #section-my-matches .my-matches__empty {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: no-preference) {
  #section-my-matches .match-item,
  #section-my-matches .my-matches__empty,
  .my-matches__intro {
    animation: psm-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  #section-my-matches .list > li:nth-child(2) .match-item { animation-delay: 0.06s; }
  #section-my-matches .list > li:nth-child(3) .match-item { animation-delay: 0.12s; }

  #section-my-matches .match-item:hover {
    transform: translateY(-3px);
    border-color: #c9d3f5;
    box-shadow: 0 18px 34px -24px rgba(22, 34, 79, 0.55);
  }

  .my-matches__empty-icon {
    animation: psm-pop 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  #section-my-matches .my-matches__block .badge {
    animation: psm-pop 0.45s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}

/* Cuenta atrás de cierre de inscripciones */
.registration-countdown {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  background: linear-gradient(120deg, #19244d 0%, #2c4aa0 100%);
  color: #ffffff;
}

.registration-countdown__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.registration-countdown__label::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #dcf56b;
}

.registration-countdown__units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.registration-countdown__unit {
  display: grid;
  justify-items: center;
  padding: 0.4rem 0.2rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.registration-countdown__unit strong {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #dcf56b;
}

.registration-countdown__unit small {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.registration-countdown__date {
  font-size: 0.8rem;
  opacity: 0.75;
}

/* Últimas 24 horas: tono naranja para avisar de que queda poco */
.registration-countdown--urgent {
  background: linear-gradient(120deg, #b6411f 0%, #e8774f 100%);
}

.registration-countdown--urgent .registration-countdown__unit strong {
  color: #ffffff;
}

.registration-countdown--urgent .registration-countdown__label::before {
  background: #ffffff;
}

.registration-countdown--closed {
  background: #eef1f6;
  color: #5b6478;
}

.registration-countdown--closed .registration-countdown__label::before {
  background: #8a93ab;
}

@keyframes psm-tick {
  0% { opacity: 0.2; transform: translateY(-6px); }
  100% { opacity: 1; transform: none; }
}

@keyframes psm-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 245, 107, 0.7); }
  50% { box-shadow: 0 0 0 5px rgba(220, 245, 107, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .registration-countdown__unit strong.is-ticking {
    animation: psm-tick 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .registration-countdown__label::before {
    animation: psm-pulse-dot 1.6s ease-in-out infinite;
  }

  .registration-countdown--urgent {
    animation: psm-glow 1.8s ease-in-out infinite;
  }
}

/* Partidos de liga: pie de las tarjetas con avisos, calendario y botones de gestión */
.home-score__extra {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid #edf0f7;
}

.home-score__extra:empty {
  display: none;
}

.home-score__extra .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.home-score__extra .actions button {
  flex: 1 1 8rem;
  border-radius: 12px;
}

.home-score__extra .meta.warning,
.home-score__extra .deadline-warning {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: #fff1ea;
  color: #8a2f12;
  font-size: 0.88rem;
}

.home-score__extra .match-calendar-actions {
  margin: 0;
}

.home-score--review .home-score__status {
  background: #ffe1d4;
  color: #8a2f12;
}

.match-category-group__matches.home-scores__list {
  padding: 0;
  margin-top: 0.75rem;
}

/* Formulario de resultado con aspecto de marcador */
.result-form .match-results-section {
  overflow: hidden;
  padding: 0;
  border: 1px solid #dfe5f3;
  border-radius: 18px;
  background: #ffffff;
}

.result-form .match-results-header {
  padding: 0.75rem 1rem;
  background: #19244d;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.result-form .match-results-header span {
  color: inherit;
}

.result-form .match-results-row {
  padding: 0.65rem 1rem;
  border-top: 1px solid #edf0f7;
}

.result-form .player-name-input {
  padding: 0;
  border: 0 !important;
  background: none !important;
  color: #16224f;
  font-weight: 700;
  outline: none !important;
}

.result-form .set-input {
  height: 3rem;
  padding: 0;
  border: 1px solid #d9dfec;
  border-radius: 12px;
  background: #f6f8fc;
  color: #16224f;
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.result-form .set-input:focus {
  border-color: #3554f0;
  background: #ffffff;
}

.result-form .set-input.winner-set {
  border-color: #3554f0;
  background: #edf1fd;
  color: #3554f0;
}

.result-form .calculated-winner {
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: #dcf56b;
  color: #2f3d0a;
}

.result-form .calculated-winner::before {
  content: '🏆 ';
}

.result-form .form-actions .primary {
  flex: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .result-form .set-input:focus {
    transform: scale(1.05);
  }

  .result-form .calculated-winner {
    animation: psm-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* Las tarjetas de partido dentro de listas clásicas (.list) no heredan su relleno ni su rejilla */
#app-view li.home-score {
  display: block;
  gap: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
  border: 1px solid #dfe5f3;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 10px 24px -20px rgba(22, 34, 79, 0.6);
}

#app-view li.home-score.home-upcoming-match {
  border-top: 4px solid #3554f0;
}

#app-view li.home-score.home-upcoming-match--pending {
  border-top-color: #e8774f;
}

#app-view .match-category-group {
  min-width: 0;
}

#app-view .home-score mark {
  padding: 0 0.15rem;
  border-radius: 4px;
  background: #dcf56b;
  color: inherit;
}

.result-form input.set-input {
  text-align: center !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

.result-form input.set-input::-webkit-outer-spin-button,
.result-form input.set-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* ==========================================================================
   Mis partidos · liga: Playtomic, WhatsApp con el rival y resultado
   ========================================================================== */
#section-my-matches .my-matches__league {
  margin-bottom: 1.5rem;
}

#section-my-matches .my-matches__block--league {
  border-top-color: #3554f0;
}

.my-matches__league-hint {
  margin: 0;
  padding: 0.85rem 1.25rem 0;
  font-size: 0.92rem;
  color: #5b6478;
}

#section-my-matches .my-matches__block > .home-scores__list {
  padding: 1rem;
}

.my-league-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.my-league-actions__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.9rem;
  padding: 0.55rem 0.8rem;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.my-league-actions__button--playtomic {
  background: #2e59fb;
}

.my-league-actions__button--playtomic img {
  display: block;
  height: 1.3rem;
  width: auto;
  filter: brightness(0) invert(1);
}

.my-league-actions__button--whatsapp {
  background: #25d366;
  color: #ffffff;
}

.my-league-actions__button--whatsapp svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

.my-league-actions__button--whatsapp span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-league-actions__note {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: #f6f8fc;
  color: #6b7489;
  font-size: 0.82rem;
  line-height: 1.3;
}

.my-league-actions__result {
  grid-column: 1 / -1;
  border-radius: 12px;
}

.my-league-actions > :only-child,
.my-league-actions__button:first-child:nth-last-child(2) {
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: no-preference) {
  .my-league-actions__button {
    transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }

  .my-league-actions__button:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 10px 18px -12px rgba(22, 34, 79, 0.6);
  }

  .my-league-actions__button:active {
    transform: scale(0.96);
  }
}

/* ==========================================================================
   Mi cuenta
   ========================================================================== */
.account-page__intro {
  margin-bottom: 1.5rem;
}

#section-account #account-dashboard-card,
#section-account .account-profile,
#section-account #player-level-card {
  border-top: 4px solid #3554f0;
}

#section-account #player-level-card {
  border-top-color: #dcf56b;
}

/* Totales de pagos como fichas */
#section-account .account-dashboard__totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem;
}

#section-account .account-dashboard__total {
  padding: 0.8rem 0.9rem;
  border: 1px solid #e3e8f2;
  border-radius: 14px;
  background: #f6f8fc;
}

#section-account .account-dashboard__total strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #16224f;
}

#section-account .account-dashboard__section h4 {
  margin: 1.25rem 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7489;
}

/* Perfil: cabecera azul marino con la foto y datos en fichas */
#section-account .account-profile {
  padding: 0;
  overflow: hidden;
}

#section-account .account-profile > .card-header {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #e6eaf3;
  background: #f6f8fc;
}

#section-account .account-wrapper {
  padding: 1.25rem;
}

#section-account .account-overview {
  padding: 0;
  border: 0;
  background: none;
}

#section-account .account-photo {
  border: 4px solid #ffffff;
  border-radius: 24px;
  background: linear-gradient(135deg, #3159f5 0%, #2443d6 100%);
  box-shadow: 0 14px 30px -18px rgba(22, 34, 79, 0.6);
}

#section-account .account-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem;
}

#section-account .account-list > div {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid #e3e8f2;
  border-radius: 14px;
  background: #ffffff;
}

#section-account .account-list dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a93ab;
}

#section-account .account-list dd {
  margin: 0.25rem 0 0;
  font-weight: 700;
  color: #16224f;
  overflow-wrap: anywhere;
}

#section-account .profile-edit-btn {
  border-radius: 14px;
  background: #3554f0;
  box-shadow: 0 10px 20px -12px rgba(53, 84, 240, 0.7);
}

/* Estadísticas: fichas lima y coral como en el inicio */
#section-account .player-level-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

#section-account .player-level-stat {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: 20px;
  text-align: left;
}

#section-account .player-level-stat--win {
  background: linear-gradient(160deg, #e4f98b 0%, #c6ea5c 100%);
  color: #2c3a06;
}

#section-account .player-level-stat--loss {
  background: linear-gradient(160deg, #ee9d80 0%, #e2785a 100%);
  color: #4a1c10;
}

#section-account .player-level-stat__value {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: inherit;
}

#section-account .player-level-stat__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}

#section-account .player-stats-tab {
  border-radius: 999px;
}

#section-account .player-stats-tab--active {
  background: #19244d;
  color: #ffffff;
}

#section-account .player-stats-tab--active img {
  filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: no-preference) {
  .account-page__intro,
  #section-account .account-list > div,
  #section-account .account-dashboard__total {
    animation: psm-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  #section-account .account-list > div:nth-child(n + 4) { animation-delay: 0.06s; }
  #section-account .account-list > div:nth-child(n + 8) { animation-delay: 0.12s; }

  #section-account .player-level-stat__value {
    animation: psm-pop 0.5s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  #section-account .account-photo {
    transition: transform 0.25s ease;
  }

  #section-account .account-photo:hover {
    transform: scale(1.04) rotate(-2deg);
  }
}

/* Partidos de liga: sin fecha ni pista, solo los jugadores enfrentados */
.home-upcoming-match--league .home-upcoming-match__players {
  padding: 0.6rem 1rem;
}

.home-upcoming-match__versus {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.15rem 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #b5bdd3;
}

.home-upcoming-match__versus::before,
.home-upcoming-match__versus::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e3e8f2;
}

.home-upcoming-match--league .home-upcoming-match__team + .home-upcoming-match__versus + .home-upcoming-match__team {
  border-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .home-upcoming-match__versus {
    animation: psm-pop 0.45s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}

/* ==========================================================================
   Jugadores/as (ligas y torneos): tarjetas por categoría con el diseño del inicio
   ========================================================================== */
.players-page__intro {
  margin-bottom: 1.5rem;
}

#league-players-list.league-players-grid,
#tournament-enrollment-list.league-players-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem !important;
  padding: 0;
}

#league-players-list.league-players-grid > li.league-players-card,
#tournament-enrollment-list.league-players-grid > li.league-players-card {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e3e8f2;
  border-top: 4px solid var(--category-color, #3554f0);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 24px -22px rgba(22, 34, 79, 0.6);
}

.league-players-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border: 0 !important;
  border-bottom: 1px solid #edf0f7 !important;
  background: #f6f8fc !important;
}

.league-players-card__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #16224f !important;
}

.league-players-card__title::before {
  content: '';
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--category-color, #3554f0);
}

.league-players-card__level {
  padding: 0.2rem 0.55rem;
  border-radius: 8px;
  background: #dcf56b;
  color: #2f3d0a;
  font-size: 0.78rem;
  font-weight: 700;
}

.league-players-card__count {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--category-color-soft, #e8edfd);
  color: var(--category-color, #3554f0);
  font-size: 0.8rem;
  font-weight: 700;
}

.league-players-card__body {
  margin: 0;
  padding: 0.35rem 0.6rem 0.6rem;
  list-style: none;
}

#league-players-list .league-players-card__body li,
#tournament-enrollment-list .league-players-card__body li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.55rem 0.45rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.league-players-card__body > li:not(:last-child) {
  border-bottom: 1px solid #f0f2f8 !important;
}

#league-players-list .league-players-item .player-cell,
#tournament-enrollment-list .league-players-item .player-cell {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.league-players-card .player-avatar {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 12px;
  background: #e8edfd;
  color: #3554f0;
  font-weight: 800;
}

.league-players-card__body > li:nth-child(even) .player-avatar--placeholder {
  background: #eef6dc;
  color: #5d7a14;
}

.league-players-card .player-cell__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #16224f;
}

.league-players-item__actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.4rem;
}

.league-players-card .player-contact-icon {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 12px;
}

.league-players-card .player-contact-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.league-players-card .player-contact-icon--whatsapp {
  background: #25d366;
  color: #ffffff;
}

.league-players-card .player-contact-icon--call {
  background: #e8edfd;
  color: #3554f0;
}

#league-players-card .player-directory-summary,
#section-tournament-enrollments .player-directory-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: #e8edfd;
  color: #2443d6;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .league-players-card {
    animation: psm-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .league-players-grid > .league-players-card:nth-child(2) { animation-delay: 0.06s; }
  .league-players-grid > .league-players-card:nth-child(3) { animation-delay: 0.12s; }
  .league-players-grid > .league-players-card:nth-child(n + 4) { animation-delay: 0.18s; }

  .league-players-card__body > li {
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .league-players-card__body > li:hover {
    background: #f6f8fc !important;
    transform: translateX(3px);
  }

  .league-players-card .player-contact-icon {
    transition: transform 0.18s ease, box-shadow 0.2s ease;
  }

  .league-players-card .player-contact-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -10px rgba(22, 34, 79, 0.7);
  }
}

/* ==========================================================================
   Jugadores/as: filtros compactos por etiquetas y cabeceras de categoría a color
   ========================================================================== */
#league-players-card,
#tournament-enrollments-card {
  padding: 1.25rem;
}

#league-players-card .player-directory-controls,
#tournament-enrollments-card .player-directory-controls {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.75rem 0 1.25rem;
}

.player-filter {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.player-filter[hidden] {
  display: none;
}

.player-filter__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7491;
}

.filter-chips__native {
  display: none !important;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.filter-chips[hidden] {
  display: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.15rem;
  margin: 0;
  padding: 0.35rem 0.9rem;
  border: 1px solid #dfe4f0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: none;
  color: #33406b;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.filter-chip:disabled {
  opacity: 0.55;
  cursor: default;
}

.filter-chip--color::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--chip-color, #3554f0);
}

.filter-chip.is-active {
  border-color: #16224f;
  background: #16224f;
  color: #ffffff;
}

.filter-chip--color.is-active {
  border-color: var(--chip-color, #16224f);
  background: var(--chip-color, #16224f);
}

.filter-chip--color.is-active::before {
  background: #ffffff;
}

.player-filter--search {
  position: relative;
}

.player-filter--search::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.85rem;
  z-index: 1;
  width: 1.05rem;
  height: 1.05rem;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7491' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

#app-view .player-filter--search input[type='search'] {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.55rem 0.9rem 0.55rem 2.4rem;
  border: 1px solid #dfe4f0;
  border-radius: 14px;
  background: #f6f8fc;
  font-size: 0.92rem;
}

#app-view .player-filter--search input[type='search']:focus {
  border-color: #3554f0;
  background-color: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(53, 84, 240, 0.15);
}

/* Cabecera de categoría: bloque a color con icono, nombre, nivel y nº de inscritos */
#league-players-list.league-players-grid > li.league-players-card,
#tournament-enrollment-list.league-players-grid > li.league-players-card {
  border-top: 1px solid #e3e8f2;
}

#app-view .league-players-card__header {
  position: relative;
  flex-wrap: nowrap;
  gap: 0.8rem;
  padding: 1rem 1.1rem !important;
  overflow: hidden;
  border: 0 !important;
  background-color: var(--category-color, #3554f0) !important;
  background-image: linear-gradient(
    135deg,
    var(--category-color, #3554f0) 0%,
    color-mix(in srgb, var(--category-color, #3554f0) 68%, #16224f) 100%
  ) !important;
  color: #ffffff;
}

#app-view .league-players-card__header::after {
  content: '';
  position: absolute;
  top: -2.6rem;
  right: -1.6rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.league-players-card__badge {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.league-players-card__heading {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1 1 auto;
  justify-items: start;
  gap: 0.35rem;
  min-width: 0;
  text-align: left;
}

#app-view .league-players-card__title {
  display: block;
  overflow: hidden;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff !important;
}

#app-view .league-players-card__title::before {
  content: none;
}

.league-players-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#app-view .league-players-card__count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

@media (max-width: 1024px) {
  #league-players-card,
  #tournament-enrollments-card {
    padding: 1rem !important;
  }

  #league-players-list.league-players-grid > li.league-players-card,
  #tournament-enrollment-list.league-players-grid > li.league-players-card {
    border: 1px solid #e3e8f2 !important;
    border-radius: 18px !important;
  }

  /* En móvil las etiquetas se desplazan en horizontal en una sola línea */
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -1rem;
    padding: 0.1rem 1rem 0.2rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .filter-chips::-webkit-scrollbar {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .filter-chip {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  }

  .filter-chip:not(:disabled):active {
    transform: scale(0.95);
  }

  .filter-chip.is-active {
    animation: psm-pop 0.25s ease both;
  }

  .league-players-card__badge {
    animation: psm-pop 0.4s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

#tournament-enrollments-card .player-directory-controls__action:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#tournament-enrollments-card .player-directory-controls__action > button {
  width: auto;
  flex: 1 1 auto;
  min-height: 2.3rem;
  padding: 0.4rem 0.9rem;
  border-radius: 12px;
  font-size: 0.86rem;
  white-space: nowrap;
}

#league-players-card #league-players-print {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.3rem;
  padding: 0.4rem 0.85rem;
  border-radius: 12px;
  font-size: 0.86rem;
  white-space: nowrap;
}

/* ==========================================================================
   Menú principal: «Mis Partidos» destacado en verde y menú lateral renovado
   ========================================================================== */
#app-menu .menu-button--highlight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  background: linear-gradient(135deg, #3ccf6e 0%, #16a34a 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px -12px rgba(22, 163, 74, 0.85);
}

#app-menu .menu-button--highlight .menu-button__icon {
  opacity: 1;
}

#app-menu .menu-button--highlight.active {
  background: linear-gradient(135deg, #22b55a 0%, #12813b 100%);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(220, 245, 107, 0.9), 0 12px 24px -12px rgba(22, 163, 74, 0.9);
}

#app-menu .menu-button--highlight #menu-my-matches-badge {
  box-shadow: 0 0 0 2px #ffffff;
}

@media (hover: hover) {
  #app-menu .menu-button--highlight:hover {
    background: linear-gradient(135deg, #34c465 0%, #12813b 100%);
    color: #ffffff;
  }
}

@media (max-width: 1024px) {
  #app-menu .main-menu__list:not(.main-menu__list--mobile-footer) {
    gap: 0.3rem;
  }

  #app-menu .menu-button:not(.menu-button--nested) {
    gap: 0.8rem;
    padding: 0.6rem 0.9rem 0.6rem 0.6rem;
    border-radius: 18px;
    font-size: 1.04rem;
    font-weight: 700;
    color: #16224f;
  }

  #app-menu .menu-button:not(.menu-button--nested) .menu-button__icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    padding: 0.6rem;
    border-radius: 13px;
    background: #eef2ff;
    color: #3554f0;
    opacity: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  #app-menu .menu-button.active:not(.menu-button--nested):not(.menu-button--highlight),
  #app-menu .menu-group--expanded > .menu-button {
    border-color: transparent;
    background: #16224f;
    color: #ffffff;
  }

  #app-menu .menu-button.active:not(.menu-button--nested) .menu-button__icon,
  #app-menu .menu-group--expanded > .menu-button .menu-button__icon,
  #app-menu .menu-button--highlight .menu-button__icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
  }

  #app-menu .menu-button.menu-button--highlight:not(.menu-button--nested) {
    color: #ffffff;
    font-weight: 800;
  }

  #app-menu .menu-button.menu-button--highlight:not(.menu-button--nested) .menu-button__icon {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
  }

  /* Submenú: carril a la izquierda en lugar de botones con marco */
  #app-menu .menu-group--expanded > .menu-submenu {
    padding: 0.3rem 0 0.4rem;
  }

  #app-menu .menu-submenu__list {
    gap: 0.1rem;
    margin-left: 1.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid #e3e8f2;
  }

  #app-menu .menu-submenu__list > li {
    position: relative;
  }

  #app-menu .menu-submenu .menu-button {
    padding: 0.62rem 0.85rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #4a5675;
    font-size: 0.97rem;
    font-weight: 600;
  }

  #app-menu .menu-submenu .menu-button.active:not(.is-current) {
    background: transparent;
    color: #4a5675;
    font-weight: 600;
  }

  #app-menu .menu-submenu .menu-button.is-current {
    background: #e8edfd;
    color: #2443d6;
    font-weight: 700;
  }

  #app-menu .menu-submenu .menu-button.is-current::before {
    content: '';
    position: absolute;
    top: 22%;
    bottom: 22%;
    left: calc(-0.75rem - 2px);
    width: 3px;
    border-radius: 3px;
    background: #3554f0;
  }
}

@media (max-width: 1024px) and (hover: hover) {
  #app-menu .menu-button:not(.menu-button--nested):not(.active):not(.menu-button--highlight):hover {
    background: #f3f5fb;
    color: #16224f;
  }

  #app-menu .menu-submenu .menu-button:not(.active):hover {
    background: #f3f5fb;
    color: #16224f;
  }
}

/* En pantallas táctiles el :hover se queda «pegado» tras pulsar: no lo resaltamos */
@media (hover: none) {
  #app-menu .menu-button:not(.active):not(.menu-button--highlight):hover,
  #app-menu .menu-button:not(.active):not(.menu-button--highlight):focus:not(:focus-visible) {
    background: transparent;
    color: inherit;
  }

  #app-menu .menu-group--expanded > .menu-button:hover {
    background: #16224f;
    color: #ffffff;
  }
}

@keyframes psm-menu-highlight {
  0%, 100% { box-shadow: 0 10px 22px -12px rgba(22, 163, 74, 0.85), 0 0 0 0 rgba(60, 207, 110, 0.45); }
  50% { box-shadow: 0 10px 22px -12px rgba(22, 163, 74, 0.85), 0 0 0 7px rgba(60, 207, 110, 0); }
}

@keyframes psm-menu-icon {
  0%, 80%, 100% { transform: none; }
  86% { transform: rotate(-12deg) scale(1.08); }
  93% { transform: rotate(10deg) scale(1.08); }
}

@media (prefers-reduced-motion: no-preference) {
  #app-menu .menu-button--highlight:not(.active) {
    animation: psm-menu-highlight 2.4s ease-in-out infinite;
  }

  #app-menu .menu-button--highlight::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: psm-shine 3.6s ease-in-out infinite;
    pointer-events: none;
  }

  #app-menu .menu-button--highlight .menu-button__icon {
    animation: psm-menu-icon 3.6s ease-in-out infinite;
  }

  #app-menu .menu-group--expanded > .menu-submenu .menu-submenu__list > li {
    animation: psm-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  #app-menu .menu-group--expanded > .menu-submenu .menu-submenu__list > li:nth-child(2) { animation-delay: 0.03s; }
  #app-menu .menu-group--expanded > .menu-submenu .menu-submenu__list > li:nth-child(3) { animation-delay: 0.06s; }
  #app-menu .menu-group--expanded > .menu-submenu .menu-submenu__list > li:nth-child(4) { animation-delay: 0.09s; }
  #app-menu .menu-group--expanded > .menu-submenu .menu-submenu__list > li:nth-child(5) { animation-delay: 0.12s; }
  #app-menu .menu-group--expanded > .menu-submenu .menu-submenu__list > li:nth-child(n + 6) { animation-delay: 0.15s; }

  #app-menu .menu-button:not(.menu-button--nested):active {
    transform: scale(0.98);
  }
}

#app-menu .menu-button--highlight .menu-label {
  color: inherit;
}

/* Solo la sección abierta se resalta dentro del submenú (no también su sección padre) */
#app-menu .menu-submenu .menu-button--nested.active:not(.is-current) {
  background: transparent;
  color: var(--text-secondary);
}

/* Líder de la categoría: fondo con el color de la categoría (oscurecido para que el texto blanco se lea) */
.home-ranking__leader {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: color-mix(in srgb, var(--category-color, #2c4aa0) 80%, #16224f);
  background-image: linear-gradient(
    120deg,
    color-mix(in srgb, var(--category-color, #2c4aa0) 88%, #16224f) 0%,
    color-mix(in srgb, var(--category-color, #2c4aa0) 55%, #16224f) 100%
  );
  box-shadow: 0 14px 28px -20px var(--category-color, #2c4aa0);
}

.home-ranking__leader::after {
  content: '';
  position: absolute;
  top: -3rem;
  right: -2rem;
  z-index: -1;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.home-ranking__leader-icon {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ==========================================================================
   Iconos de pelota de tenis (SVG, no emoji)
   ========================================================================== */
.tennis-ball {
  display: block;
  flex-shrink: 0;
}

#app-menu .menu-button__icon--ball svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(11, 61, 30, 0.35));
}

.home-score__sport {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.home-score__sport .tennis-ball {
  width: 0.95rem;
  height: 0.95rem;
}

.my-matches__empty-icon {
  background: #eef9d0;
}

.my-matches__empty-icon .tennis-ball {
  width: 2rem;
  height: 2rem;
}

.home-panel__eyebrow--ball {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.home-panel__eyebrow--ball .tennis-ball {
  width: 1.05rem;
  height: 1.05rem;
}

@keyframes psm-ball-bounce {
  0%, 62%, 100% { transform: translateY(0) rotate(0deg); }
  70% { transform: translateY(-5px) rotate(120deg); }
  78% { transform: translateY(0) rotate(200deg) scaleY(0.9); }
  86% { transform: translateY(-2px) rotate(260deg); }
  94% { transform: translateY(0) rotate(360deg); }
}

@keyframes psm-ball-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: no-preference) {
  /* La pelota de «Mis Partidos» bota y rueda en lugar de balancearse */
  #app-menu .menu-button--highlight .menu-button__icon--ball {
    animation: none;
  }

  #app-menu .menu-button__icon--ball svg {
    animation: psm-ball-bounce 3.2s ease-in-out infinite;
  }

  .my-matches__empty-icon .tennis-ball {
    animation: psm-ball-bounce 3.2s ease-in-out infinite;
  }

  .home-panel__eyebrow--ball .tennis-ball {
    animation: psm-ball-spin 6s linear infinite;
  }
}

@media (max-width: 1024px) {
  #app-menu .menu-button:not(.menu-button--nested) .menu-button__icon--ball {
    padding: 0.35rem;
  }
}

/* ==========================================================================
   Inicio: tarjeta de bienvenida y cancha de tenis de fondo
   ========================================================================== */
.home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  margin-bottom: 1.75rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 1px solid rgba(53, 84, 240, 0.6);
  border-radius: 24px;
  background:
    linear-gradient(100deg, rgba(23, 42, 140, 0.96) 0%, rgba(31, 58, 180, 0.82) 45%, rgba(31, 58, 180, 0.25) 100%),
    url('assets/court.svg') right center / cover no-repeat,
    #1f3ab4;
  box-shadow: 0 22px 40px -28px rgba(22, 34, 79, 0.9);
  color: #ffffff;
}

.home-hero__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.home-hero__title {
  display: grid;
  margin: 0;
  font-size: clamp(2.1rem, 9vw, 3.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #ffffff;
}

.home-hero__highlight {
  color: #dcf56b;
}

.home-hero__text {
  max-width: 30rem;
  margin: 0;
  font-size: clamp(1rem, 3.6vw, 1.15rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.home-hero__action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding: 0.85rem 1.3rem;
  border: 0;
  border-radius: 14px;
  background: #dcf56b;
  box-shadow: none;
  color: #16224f;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.home-hero__action svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* «Inscripciones activas» con una cancha de tenis de fondo */
.home-stat.home-stat--enrollments {
  background:
    linear-gradient(135deg, rgba(49, 89, 245, 0.92) 0%, rgba(36, 67, 214, 0.55) 100%),
    url('assets/court.svg') right center / cover no-repeat,
    #2443d6;
}

.home-stat--enrollments .home-stat__art--court {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero {
    animation: psm-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .home-hero__action {
    transition: transform 0.18s ease, box-shadow 0.2s ease;
  }

  .home-hero__action:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -14px rgba(220, 245, 107, 0.9);
  }
}

/* ==========================================================================
   Barra superior en móvil: compacta, a todo el ancho y con botones uniformes
   ========================================================================== */
@media (max-width: 1024px) {
  #app-view .mobile-topbar {
    gap: 0.5rem;
    margin: 0 -0.75rem 0.25rem;
    padding: calc(0.55rem + env(safe-area-inset-top)) 1rem 0.65rem;
    border-bottom: 1px solid #e6eaf3;
    background: #ffffff;
    box-shadow: 0 8px 20px -18px rgba(22, 34, 79, 0.55);
  }

  #app-view .mobile-topbar::after {
    height: 2px;
    opacity: 0.85;
  }

  #app-view #mobile-club-logo {
    width: 88px !important;
    height: 88px !important;
  }

  #app-view .mobile-topbar__actions {
    gap: 0.5rem;
    margin-right: 0.5rem;
  }

  #app-view .mobile-topbar .topbar-icon-button,
  #app-view .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #e3e8f2;
    border-radius: 14px;
    background: #f6f8fc;
    box-shadow: none;
    color: #16224f;
    backdrop-filter: none;
  }

  #app-view .mobile-topbar .topbar-icon-button svg {
    width: 21px;
    height: 21px;
  }

  #app-view .mobile-topbar__avatar {
    width: 38px;
    height: 38px;
    outline-width: 2px;
    outline-offset: 2px;
  }

  #app-view .mobile-topbar .notification-bell__badge {
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    font-size: 0.66rem;
    box-shadow: 0 0 0 2px #ffffff;
  }

  /* Hamburguesa en navy, como el resto de botones destacados */
  #app-view .mobile-menu-toggle {
    border-color: #16224f;
    background: #16224f;
    color: #ffffff;
  }

  #app-view .mobile-menu-toggle__icon {
    width: 18px;
  }

  #app-view .mobile-menu-toggle__icon::before {
    transform: translateY(-5.5px);
  }

  #app-view .mobile-menu-toggle__icon::after {
    width: 70%;
    transform: translateY(5.5px);
  }
}

@media (max-width: 1024px) and (hover: hover) {
  #app-view .mobile-topbar .topbar-icon-button:hover {
    border-color: rgba(53, 84, 240, 0.35);
    background: #eef2ff;
    color: #2443d6;
  }
}

/* ==========================================================================
   Ligas → Partidos con el diseño del inicio
   ========================================================================== */
.matches-page__intro {
  margin-bottom: 1.25rem;
}

#section-matches .card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

#section-matches .card-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #16224f;
}

#section-matches .card-header .card-subtitle {
  margin: 0;
  color: #6b7491;
}

#section-matches .card-header .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.4rem;
}

#section-matches .card-header .card-actions > button:not([hidden]) {
  flex: 1 1 auto;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* Grupo por categoría: sin marco propio, cabecera con el color de la categoría */
#app-view .list > li.match-category-group {
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app-view .match-category-group__header {
  padding: 0.65rem 0.9rem;
  border-left: 4px solid var(--category-color, #3554f0);
  border-radius: 12px;
  background: var(--category-color-soft, #e8edfd);
}

#app-view .match-category-group__title strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #16224f;
}

#app-view .match-category-group__count {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #ffffff;
  color: var(--category-color, #3554f0);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Enlaces de calendario como fila de etiquetas compactas */
#app-view .home-score__extra .match-calendar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

#app-view .home-score__extra .match-calendar-actions__label {
  flex-basis: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7491;
}

#app-view .home-score__extra .match-calendar-actions__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid #e3e8f2;
  border-radius: 999px;
  background: #f6f8fc;
  color: #16224f;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Estado vacío con pelota de tenis */
#section-matches .list > li.empty-state {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem !important;
  border: 1px dashed #d6dcea !important;
  border-radius: 16px !important;
  background: #f8fafd !important;
  color: #6b7491;
  text-align: center;
}

#section-matches .list > li.empty-state::before {
  content: '';
  width: 2.6rem;
  height: 2.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23cbe843'/%3E%3Cpath d='M4.6 4.8c3.6 3.8 3.6 10.6 0 14.4M19.4 4.8c-3.6 3.8-3.6 10.6 0 14.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==========================================================================
   Panel de Ligas: cabecera de página y aviso de Playtomic destacado
   ========================================================================== */
.league-dashboard__intro {
  margin-bottom: 1.1rem;
}

/* La tarjeta contenedora deja de tener marco: el aviso y las ligas van sueltos */
#section-league-dashboard > .card.league-dashboard__card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.playtomic-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.15rem 1.2rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #16224f 0%, #23367f 100%);
  box-shadow: 0 18px 32px -24px rgba(22, 34, 79, 0.9);
  color: #ffffff;
}

.playtomic-banner[hidden] {
  display: none;
}

.playtomic-banner::after {
  content: '';
  position: absolute;
  top: -3.5rem;
  right: -2.5rem;
  z-index: -1;
  width: 9rem;
  height: 9rem;
  border: 1.4rem solid rgba(220, 245, 107, 0.12);
  border-radius: 50%;
}

.playtomic-banner__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.playtomic-banner__icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  flex-shrink: 0;
  border-radius: 14px;
  background: #dcf56b;
  color: #16224f;
}

.playtomic-banner__icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.playtomic-banner__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #dcf56b;
}

.playtomic-banner__title {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}

.playtomic-banner__steps {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.playtomic-banner__steps li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}

.playtomic-banner__steps li span {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  border: 1px solid rgba(220, 245, 107, 0.6);
  border-radius: 50%;
  color: #dcf56b;
  font-size: 0.8rem;
  font-weight: 800;
}

.playtomic-banner__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.9rem;
  margin: 0;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: 14px;
  background: #dcf56b;
  box-shadow: none;
  color: #16224f;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.playtomic-banner__action svg {
  width: 1.1rem;
  height: 1.1rem;
}

@media (min-width: 720px) {
  .playtomic-banner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
  }

  .playtomic-banner__steps {
    grid-auto-flow: column;
    justify-content: center;
    gap: 1.25rem;
  }

  .playtomic-banner__action {
    width: auto;
  }
}

@keyframes psm-banner-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 245, 107, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(220, 245, 107, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .playtomic-banner {
    animation: psm-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .playtomic-banner__icon {
    animation: psm-banner-ring 2.4s ease-in-out infinite;
  }

  .playtomic-banner__steps li {
    animation: psm-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .playtomic-banner__steps li:nth-child(2) { animation-delay: 0.08s; }
  .playtomic-banner__steps li:nth-child(3) { animation-delay: 0.16s; }

  .playtomic-banner__action {
    transition: transform 0.18s ease;
  }

  .playtomic-banner__action:active {
    transform: scale(0.98);
  }
}

/* Aviso de Playtomic dentro de «Liga: tus partidos por jugar» (sin botón: cada partido tiene el suyo) */
.playtomic-banner.playtomic-banner--compact {
  margin: 1rem 0.95rem 0.5rem;
  padding: 1rem;
  border-radius: 18px;
}

@media (min-width: 720px) {
  .playtomic-banner.playtomic-banner--compact {
    grid-template-columns: auto 1fr;
  }
}

/* ==========================================================================
   Torneos → Cuadros con el diseño del inicio
   ========================================================================== */
.brackets-page__intro {
  margin-bottom: 1.1rem;
}

#tournament-brackets-card .tournament-bracket-controls {
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  margin-top: 0;
}

#section-tournament-brackets .tournament-bracket-card {
  padding: 1.1rem;
}

#section-tournament-brackets .tournament-bracket-card > .card-header {
  margin-bottom: 0.5rem;
}

#section-tournament-brackets .tournament-bracket-card .card-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#section-tournament-brackets .tournament-bracket-card .card-actions > button:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  min-height: 2.3rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid #e3e8f2;
  border-radius: 12px;
  background: #f6f8fc;
  box-shadow: none;
  color: #16224f;
  font-size: 0.86rem;
  font-weight: 700;
}

#section-tournament-brackets .tournament-bracket-card .card-actions > .tournament-bracket-fullscreen-button:not([hidden]) {
  border-color: #16224f;
  background: #16224f;
  color: #ffffff;
}

#section-tournament-brackets .tournament-bracket-card .card-actions svg {
  width: 1rem;
  height: 1rem;
}

#section-tournament-brackets .tournament-bracket-section__title {
  margin: 0.5rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #16224f;
}

/* Navegación por rondas (móvil) */
#section-tournament-brackets .bracket-round-nav {
  border-radius: 14px;
  background: #f6f8fc;
}

#section-tournament-brackets .bracket-round-nav__active-label,
#section-tournament-brackets .bracket-round-nav__button--active {
  color: #16224f;
}

#section-tournament-brackets .bracket-round-nav__control {
  border-color: #e3e8f2;
  background: #ffffff;
  color: #16224f;
}

#section-tournament-brackets .bracket-round__title {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: #eef1f7;
  color: #6b7491;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

#section-tournament-brackets .bracket-round--active .bracket-round__title {
  background: #16224f;
  color: #dcf56b;
}

/* Tarjeta de partido: cabecera navy y filas como en los marcadores */
#section-tournament-brackets .tournament-bracket-grid {
  --bracket-connector-color: rgba(53, 84, 240, 0.35);
}

#section-tournament-brackets .bracket-match {
  gap: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px -20px rgba(22, 34, 79, 0.7);
}

#section-tournament-brackets .bracket-match__header {
  padding: 0.5rem 0.8rem;
  border-radius: 15px 15px 0 0;
  background: #16224f;
}

#section-tournament-brackets .bracket-match__label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-weight: 700;
}

#section-tournament-brackets .bracket-match__status {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

#section-tournament-brackets .bracket-match--completado .bracket-match__status {
  background: #dcf56b;
  color: #2f3d0a;
}

#section-tournament-brackets .bracket-match--programado .bracket-match__status,
#section-tournament-brackets .bracket-match--confirmado .bracket-match__status {
  background: #3554f0;
  color: #ffffff;
}

#section-tournament-brackets .bracket-match__players {
  gap: 0;
  padding: 0.2rem 0.8rem;
}

#section-tournament-brackets .bracket-player {
  gap: 0.6rem;
  padding: 0.45rem 0;
}

#section-tournament-brackets .bracket-player + .bracket-player {
  border-top: 1px solid #edf0f7;
}

#section-tournament-brackets .bracket-player__avatar {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 10px;
  background: #e8edfd;
  box-shadow: none;
  color: #3554f0;
  font-size: 0.82rem;
  font-weight: 800;
}

#section-tournament-brackets .bracket-player__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #16224f;
  font-size: 0.92rem;
}

#section-tournament-brackets .bracket-player--winner .bracket-player__name {
  color: #16224f;
  font-weight: 800;
}

#section-tournament-brackets .bracket-player--winner .bracket-player__name::after {
  content: '';
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.35rem;
  vertical-align: -0.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397b31a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

#section-tournament-brackets .bracket-player--winner .player-avatar {
  background: #3554f0;
  box-shadow: none;
  color: #ffffff;
}

#section-tournament-brackets .bracket-player--eliminated .bracket-player__name {
  color: #8a93ad;
  font-weight: 600;
}

#section-tournament-brackets .bracket-player__score {
  min-width: 1.75rem;
  padding: 0.4rem 0.35rem;
  border-radius: 8px;
  background: #f1f4f9;
  box-shadow: none;
  color: #8a93ad;
  font-size: 0.92rem;
  font-weight: 800;
}

#section-tournament-brackets .bracket-player__score--winner {
  background: #dcf56b;
  color: #2f3d0a;
}

#section-tournament-brackets .bracket-match__meta {
  gap: 0.6rem;
  padding: 0.45rem 0.8rem 0.6rem;
  border-top: 1px solid #edf0f7;
  color: #6b7491;
  font-size: 0.76rem;
}

#section-tournament-brackets .bracket-match__actions {
  margin: 0;
  padding: 0 0.8rem 0.7rem;
}

/* Huecos aún por decidir */
#section-tournament-brackets .bracket-match--placeholder {
  border-style: dashed;
  background: #f8fafd;
}

#section-tournament-brackets .bracket-match--placeholder .bracket-match__header {
  background: #eef1f7;
}

#section-tournament-brackets .bracket-match--placeholder .bracket-match__label {
  color: #6b7491;
}

#section-tournament-brackets .bracket-match--placeholder .bracket-match__status {
  background: #ffffff;
  color: #8a93ad;
}

#section-tournament-brackets .bracket-player--placeholder .bracket-player__avatar {
  background: #eef1f7;
  color: #a3abc2;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  #section-tournament-brackets .bracket-match {
    animation: psm-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

#section-tournament-brackets .bracket-player__avatar {
  outline: 0;
}

#section-tournament-brackets .bracket-player--placeholder .bracket-player__avatar {
  font-size: 0;
}

#section-tournament-brackets .bracket-player--placeholder .bracket-player__avatar::before {
  content: '?';
  font-size: 0.82rem;
}

/* En móvil la ronda ya se indica en el navegador: sin título repetido */
#section-tournament-brackets .bracket-round-nav--focus + .tournament-bracket-grid .bracket-round__title {
  display: none;
}

/* ==========================================================================
   Pagos (ligas y torneos) con el diseño del inicio
   ========================================================================== */
.payments-page__intro {
  margin-bottom: 1.1rem;
}

:is(#league-payments-card, #tournament-payments-card) :is(.league-payments-controls, .tournament-payments-controls) {
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}

:is(.league-payments-summary, .tournament-payments-summary) {
  gap: 0.5rem;
  font-size: 0.9rem;
}

:is(#league-payments-card, #tournament-payments-card) :is(.league-payments-summary, .tournament-payments-summary) strong {
  color: #16224f;
}

:is(#league-payments-fee, #tournament-payments-fee) {
  background: #16224f;
  color: #dcf56b;
  font-weight: 800;
}

/* Grupos: cabecera con franja de color, contadores en pastilla y acciones compactas */
:is(.league-payments-group, .tournament-payments-group) {
  --payments-accent: #e8774f;
  --payments-accent-soft: #fdeee7;
  padding: 0.9rem;
  border: 1px solid #e3e8f2;
  border-top: 4px solid var(--payments-accent);
  border-radius: 18px;
  background: #ffffff;
}

:is(.league-payments-group, .tournament-payments-group)[data-status='paid'] {
  --payments-accent: #22a06b;
  --payments-accent-soft: #e3f6ec;
}

:is(.league-payments-group-header, .tournament-payments-group-header) {
  flex-wrap: wrap;
  row-gap: 0.6rem;
}

:is(.league-payments-group-header, .tournament-payments-group-header) h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #16224f;
}

:is(.league-payments-group-stats, .tournament-payments-group-stats) {
  justify-content: flex-start;
  gap: 0.4rem;
}

:is(.league-payments-group-stats, .tournament-payments-group-stats) .tag {
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--payments-accent-soft);
  color: var(--payments-accent);
  font-weight: 800;
}

:is(.league-payments-group-stats, .tournament-payments-group-stats) > button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  min-height: 2.1rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid #e3e8f2;
  border-radius: 10px;
  background: #f6f8fc;
  box-shadow: none;
  color: #16224f;
  font-size: 0.82rem;
  font-weight: 700;
}

:is(.league-payments-group-stats, .tournament-payments-group-stats) > button svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* Cada pago: tarjeta blanca con franja lateral del estado */
#app-view .list > li:is(.league-payment-entry, .tournament-payment-entry) {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:is(.league-payment-item, .tournament-payment-item) {
  border: 1px solid #e3e8f2;
  border-left: 4px solid #e8774f;
  border-radius: 14px;
  background: #ffffff;
}

:is(.league-payment-item, .tournament-payment-item):is([data-payment-status='pagado']) {
  border-left-color: #22a06b;
}

:is(.league-payment-item, .tournament-payment-item):is([data-payment-status='exento']) {
  border-left-color: #a3abc2;
}

:is(.league-payment-item, .tournament-payment-item):is([data-payment-status='fallido']) {
  border-left-color: #dc2626;
}

:is(.league-payment-item, .tournament-payment-item) summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 0.7rem;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
}

:is(.league-payment-item, .tournament-payment-item) summary::after {
  margin-left: 0;
}

:is(.league-payment-header, .tournament-payment-header) .player-cell {
  min-width: 0;
}

:is(.league-payment-header, .tournament-payment-header) .player-cell__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #16224f;
  font-weight: 700;
}

:is(.league-payment-header, .tournament-payment-header) .player-avatar {
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 10px;
  outline: 0;
  background-color: #e8edfd;
}

:is(.league-payment-header-meta, .tournament-payment-header-meta) {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.75rem;
  text-align: right;
}

:is(.league-payment-header-meta, .tournament-payment-header-meta) :is(.league-payment-amount, .tournament-payment-amount) {
  font-size: 0.98rem;
  font-weight: 800;
  color: #16224f;
}

.payment-status {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.payment-status--pendiente {
  background: #fdeee7;
  color: #c2552e;
}

.payment-status--pagado {
  background: #e3f6ec;
  color: #157a4f;
}

.payment-status--exento {
  background: #eef1f7;
  color: #6b7491;
}

.payment-status--fallido {
  background: #fde8e8;
  color: #b91c1c;
}

@media (prefers-reduced-motion: no-preference) {
  :is(.league-payment-item, .tournament-payment-item) {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  :is(.league-payment-item, .tournament-payment-item):hover {
    box-shadow: 0 10px 22px -18px rgba(22, 34, 79, 0.7);
  }
}

/* ==========================================================================
   Gestión de ligas: lista, ficha con categorías y formulario
   ========================================================================== */
.leagues-admin__intro {
  margin-bottom: 1.1rem;
}

/* Cabecera de la página con el botón «Nueva liga» a la derecha */
.leagues-admin__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.9rem 1.25rem;
}

.leagues-admin__intro-text {
  flex: 1 1 18rem;
  min-width: 0;
}

#league-create-button.leagues-admin__create:not([hidden]),
#tournament-create-button.leagues-admin__create:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: auto;
  min-height: 2.75rem;
  padding: 0.55rem 1.2rem;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 800;
  box-shadow: 0 12px 24px -16px rgba(53, 84, 240, 0.9);
}

#league-detail-card .card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

#league-detail-card .card-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #16224f;
}

/* Acciones de la liga en la cabecera de su ficha */
.league-detail-actions:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.league-detail-actions > button {
  flex: 0 0 auto;
  width: auto;
  min-height: 2.3rem;
  padding: 0.4rem 0.95rem;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
}

/* Selector de ligas: pestañas encima de la ficha */
.league-switcher:not([hidden]) {
  display: block;
  margin-bottom: 1rem;
}

.league-switcher__list {
  display: flex;
  gap: 0.65rem;
  margin: 0;
  padding: 0.15rem 0.1rem 0.45rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.league-switcher__list > li.list-heading {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 0.15rem;
  color: #6b7491;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  writing-mode: horizontal-tb;
}

.league-switcher__list > li.empty-state {
  flex: 1 1 auto;
}

.league-switcher__item {
  flex: 0 0 auto;
  min-width: 0;
  scroll-snap-align: start;
}

.league-switcher__button {
  display: grid;
  gap: 0.2rem;
  width: auto;
  min-width: 13.5rem;
  max-width: 20rem;
  height: 100%;
  padding: 0.75rem 0.95rem;
  border: 1px solid #e3e8f2;
  border-left: 4px solid #3554f0;
  border-radius: 16px;
  background: #ffffff;
  color: #16224f;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.league-switcher__button:hover {
  border-color: #c5cff0;
  box-shadow: 0 10px 22px -18px rgba(22, 34, 79, 0.7);
}

.league-switcher__item.league-item--historical .league-switcher__button {
  border-left-color: #a3abc2;
  background: #f8f9fc;
}

.league-switcher__item.is-active .league-switcher__button {
  border-color: #3554f0;
  background: linear-gradient(135deg, #eef2ff, #ffffff 70%);
  box-shadow: 0 0 0 2px rgba(53, 84, 240, 0.22), 0 14px 26px -20px rgba(53, 84, 240, 0.9);
}

.league-switcher__name {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-switcher__meta {
  color: #6b7491;
  font-size: 0.8rem;
  font-weight: 600;
}

.league-switcher__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

@media (max-width: 640px) {
  #league-create-button.leagues-admin__create:not([hidden]),
  #tournament-create-button.leagues-admin__create:not([hidden]) {
    width: 100%;
    justify-content: center;
  }

  #league-detail-card .card-header,
  #tournament-detail-card .card-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .league-detail-actions:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .league-detail-actions > button {
    width: 100% !important;
    margin: 0 !important;
  }

  .league-switcher__button {
    min-width: 11.5rem;
  }
}

/* Ficha de la liga: datos en baldosas */
#league-detail-card .league-detail__meta {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.5rem;
}

#league-detail-card .league-detail__meta-item {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: #f6f8fc;
  color: #16224f;
  font-weight: 700;
}

#league-detail-card .league-detail__meta-label {
  color: #6b7491;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#league-detail-card .league-detail__poster {
  border-radius: 16px;
}

/* Categorías dentro de la ficha */
.league-detail__categories-block {
  margin-top: 1.25rem;
}

.league-detail__categories-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.league-detail__categories-head .league-section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #16224f;
}

.league-category-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  min-height: 2.3rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 12px;
  background: #dcf56b;
  box-shadow: none;
  color: #16224f;
  font-size: 0.88rem;
  font-weight: 800;
}

.league-detail__categories-empty {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px dashed #d6dcea;
  border-radius: 16px;
  background: #f8fafd;
}

.league-detail__categories-empty .league-section-note {
  margin: 0;
}

#league-detail-card .league-detail__category {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #e3e8f2;
  border-left: 4px solid var(--category-color, #3554f0);
  border-radius: 14px;
  background: #ffffff;
}

#league-detail-card .league-detail__category > :not(.league-detail__category-actions) {
  grid-column: 1;
}

.league-detail__category-name {
  font-size: 1rem;
  font-weight: 800 !important;
  color: #16224f !important;
}

.league-detail__category-level {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: #dcf56b;
  color: #2f3d0a;
  font-weight: 700;
}

.league-detail__category-count {
  color: var(--category-color, #3554f0);
  font-weight: 700;
}

.league-detail__category-actions {
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  gap: 0.35rem;
}

.league-detail__category-actions .button--icon {
  position: static;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid #e3e8f2;
  border-radius: 10px;
  background: #f6f8fc;
  color: #16224f;
  opacity: 1;
}

.league-detail__category-actions .league-category-delete-btn {
  color: #b91c1c;
}

/* Formulario de liga en secciones */
.league-form__section {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.9rem;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #ffffff;
}

.league-form__section legend {
  padding: 0 0.4rem;
  color: #16224f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.league-form__new-categories {
  display: grid;
  gap: 0.6rem;
}

.league-form__new-categories[hidden] {
  display: none;
}

.league-form__category-rows {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.league-form__category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.4rem;
  margin: 0;
  padding: 0.6rem;
  border: 1px solid #e3e8f2;
  border-radius: 12px;
  background: #f8fafd;
}

.league-form__category-row [data-field='name'] {
  grid-column: 1 / -1;
}

.league-form__remove-category {
  width: 2.4rem;
  min-height: 2.4rem;
  padding: 0;
  color: #b91c1c;
}

.league-form__add-category {
  justify-self: start;
  width: auto;
  min-height: 2.3rem;
  padding: 0.4rem 0.9rem;
  border-radius: 12px;
  font-weight: 700;
}

/* El cartel no empuja las categorías fuera de la vista */
#league-detail-card .league-detail__poster {
  width: 100%;
  max-height: 22rem;
  object-fit: contain;
  background: #0f1a3d;
}

/* ==========================================================================
   Ligas → Categorías: tarjetas con cabecera a color y datos en baldosas
   ========================================================================== */
.categories-page__intro {
  margin-bottom: 1.1rem;
}

#categories-card .card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

#categories-card .card-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #16224f;
}

#category-create-button:not([hidden]) {
  width: auto;
  min-height: 2.4rem;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 12px;
  background: #dcf56b;
  color: #16224f;
  font-weight: 800;
}

#categories-card .categories-toolbar {
  margin: 0.75rem 0 1rem;
}

#categories-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
}

#categories-list > li.category-card {
  display: block;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #e3e8f2 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px -22px rgba(22, 34, 79, 0.6);
}

.category-card__head {
  display: grid;
  gap: 0.45rem;
  padding: 0.95rem 1.05rem;
  background-color: var(--category-color, #3554f0);
  background-image: linear-gradient(
    135deg,
    var(--category-color, #3554f0) 0%,
    color-mix(in srgb, var(--category-color, #3554f0) 65%, #16224f) 100%
  );
  color: #ffffff;
}

.category-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
}

.category-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.category-card__tags > span {
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
}

.category-card__tags > .category-card__level {
  background: #dcf56b;
  color: #2f3d0a;
}

.category-card__tags > .category-card__status {
  background: #ffffff;
  color: #16224f;
}

.category-card__body {
  display: grid;
  gap: 0.8rem;
  padding: 0.95rem 1.05rem 1.05rem;
}

.category-card__league {
  margin: 0;
  color: #6b7491;
  font-size: 0.85rem;
  font-weight: 600;
}

.category-card__description {
  margin: 0;
  color: #33406b;
  font-size: 0.9rem;
}

.category-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  gap: 0.5rem;
}

.category-card__stat {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: #f6f8fc;
}

.category-card__stat-label {
  color: #6b7491;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.category-card__stat strong {
  color: #16224f;
  font-size: 1.05rem;
  font-weight: 800;
}

.category-card__stat small {
  color: #6b7491;
  font-size: 0.75rem;
  font-weight: 700;
}

.category-card__stat small.is-open {
  color: #157a4f;
}

.category-card__stat small.is-closed,
.category-card__stat small.is-full {
  color: #c2552e;
}

.category-card__capacity {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.category-card__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3e8f2;
}

.category-card__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--category-color, #3554f0);
}

.category-card__requests {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: #fdeee7;
  color: #c2552e;
  font-size: 0.85rem;
  font-weight: 700;
}

.category-card__roster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-card__roster > li {
  margin: 0;
  padding: 0.25rem 0.65rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--category-color-soft, #e8edfd) !important;
  color: #16224f;
  font-size: 0.8rem;
  font-weight: 600;
}

.category-card__roster > li.category-card__roster-more {
  background: #eef1f7 !important;
  color: #6b7491;
}

#categories-list .category-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

#categories-list .category-actions > button {
  flex: 0 0 auto;
  width: auto;
  min-height: 2.2rem;
  padding: 0.35rem 0.9rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  #categories-list > li.category-card {
    animation: psm-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .category-card__bar > span {
    transform-origin: left center;
    animation: psm-grow-x 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* ==========================================================================
   Formularios de los modales: secciones en tarjeta y botones al pie
   ========================================================================== */
#modal-overlay .form.form--modal {
  gap: 1rem;
}

#modal-overlay .form--modal .form-section--card,
#modal-overlay .league-form__section {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0.95rem;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #ffffff;
}

#modal-overlay .form--modal .form-section__title,
#modal-overlay .form--modal .form-section--card > :is(h3, h4):first-child {
  margin: 0;
  color: #16224f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#modal-overlay .form--modal label {
  color: #16224f;
  font-weight: 600;
}

#modal-overlay .form--modal :is(input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']), select, textarea) {
  border-color: #dfe4f0;
  border-radius: 14px;
  background-color: #ffffff;
}

#modal-overlay .form--modal :is(input, select, textarea):focus {
  border-color: #3554f0;
  outline: none;
  box-shadow: 0 0 0 3px rgba(53, 84, 240, 0.15);
}

#modal-overlay .form--modal .form-hint {
  color: #6b7491;
}

/* Botones fijos al pie del modal */
#modal-overlay .form--modal > .form-actions {
  position: sticky;
  bottom: -1.75rem;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0 -1.75rem -1.75rem;
  padding: 0.85rem 1.75rem 1.1rem;
  border-top: 1px solid #e3e8f2;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
}

#modal-overlay .form--modal > .form-actions > button {
  flex: 1 1 auto;
  min-height: 2.8rem;
  border-radius: 14px;
  font-weight: 800;
}

#modal-overlay .form--modal > .form-actions > button[type='submit'] {
  flex-grow: 2;
}

@media (max-width: 640px) {
  #modal-overlay .form--modal > .form-actions {
    flex-direction: row-reverse;
    bottom: -1rem;
    margin: 0 -1.25rem -1rem;
    padding: 0.75rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom));
  }
}

#modal-overlay .form--modal .form-section--card .form-section__header {
  margin: 0;
}

#modal-overlay .form--modal .form-section--card .form-section__header :is(h3, h4) {
  margin: 0;
  color: #16224f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#modal-overlay .form--modal .form-section--card,
#modal-overlay .form--modal .form-section--card > *,
#modal-overlay .form--modal .form-grid > * {
  min-width: 0;
}

#modal-overlay .form--modal input[type='file'] {
  max-width: 100%;
}

/* ==========================================================================
   Torneos · Parejas de dobles
   ========================================================================== */
.doubles-page__intro {
  margin-bottom: 1.1rem;
}

.doubles-card {
  display: grid;
  gap: 1rem;
}

.doubles-controls {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.doubles-groups {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .doubles-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.doubles-empty {
  margin: 0;
  padding: 1.6rem 1rem;
  border: 1px dashed #d5dcea;
  border-radius: 16px;
  background: #f8faff;
  text-align: center;
}

.doubles-category {
  --category-color: #3554f0;
  --category-color-soft: rgba(53, 84, 240, 0.12);
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  padding: 0 1rem 1rem;
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 10px 24px -20px rgba(22, 34, 79, 0.45);
}

.doubles-category__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 -1rem;
  padding: 1rem 1rem 0.9rem;
  border-top: 5px solid var(--category-color);
  background: linear-gradient(135deg, var(--category-color-soft), color-mix(in srgb, var(--category-color) 4%, #ffffff));
}

.doubles-category__heading {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.doubles-category__title {
  margin: 0;
  color: color-mix(in srgb, var(--category-color) 70%, #16224f);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.2;
}

.doubles-category__meta {
  margin: 0;
  color: #5b6684;
  font-size: 0.82rem;
  font-weight: 600;
}

.doubles-category__status {
  flex-shrink: 0;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--category-color);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.doubles-category__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.doubles-stat {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.6rem 0.4rem;
  border-radius: 14px;
  background: #f4f6fb;
  text-align: center;
}

.doubles-stat strong {
  color: #16224f;
  font-size: 1.25rem;
  line-height: 1.1;
}

.doubles-stat span {
  color: #5b6684;
  font-size: 0.72rem;
  font-weight: 600;
}

.doubles-stat--pairs {
  background: var(--category-color-soft);
}

.doubles-stat--pairs strong {
  color: var(--category-color);
}

.doubles-stat--warning {
  background: #fff4e5;
}

.doubles-stat--warning strong {
  color: #c2410c;
}

.doubles-category__section-title {
  margin: 0.2rem 0 -0.3rem;
  color: #16224f;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doubles-category__empty {
  margin: 0;
  padding: 0.85rem;
  border-radius: 14px;
  background: #f8faff;
  color: #5b6684;
  font-size: 0.88rem;
  text-align: center;
}

.doubles-pairs {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doubles-pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 0.35rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e7ebf4;
  border-left: 4px solid var(--category-color);
  border-radius: 14px;
  background: #fbfcff;
}

.doubles-pair__number {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--category-color-soft);
  color: var(--category-color);
  font-size: 0.8rem;
  font-weight: 800;
}

.doubles-pair .doubles-pair-members {
  gap: 0.4rem 0.55rem;
  min-width: 0;
}

.doubles-pair .doubles-pair-member {
  min-width: 0;
}

.doubles-pair .doubles-pair-member__name {
  color: #16224f;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.doubles-pair__joiner {
  color: var(--category-color);
  font-size: 1rem;
  font-weight: 800;
}

.doubles-pair__date,
.doubles-pair__manage {
  grid-column: 2;
}

.doubles-pair__date {
  color: #7a849e;
  font-size: 0.75rem;
}

.doubles-pair__manage summary {
  width: fit-content;
  color: #3554f0;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.doubles-pair__manage .doubles-pair-actions {
  flex-direction: column;
  align-items: stretch;
}

.doubles-pair__manage .doubles-pair-substitute-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.doubles-pair__manage .doubles-pair-substitute-form select {
  min-width: 0;
}

.doubles-unpaired {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doubles-unpaired__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem 0.25rem 0.25rem;
  border: 1px dashed #f3b27a;
  border-radius: 999px;
  background: #fff8f1;
  color: #7c2d12;
  font-size: 0.82rem;
  font-weight: 600;
}

.doubles-pair-form-wrapper {
  padding: 0.85rem;
  border-radius: 14px;
  background: #f4f6fb;
}

.doubles-pair-form {
  display: grid;
  gap: 0.6rem;
}

.doubles-pair-form__title {
  color: #16224f;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doubles-pair-form__field {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  color: #16224f;
  font-size: 0.82rem;
  font-weight: 600;
}

.doubles-pair-form__field select {
  min-width: 0;
  border-radius: 12px;
}

@media (min-width: 560px) {
  .doubles-pair-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
  }

  .doubles-pair-form__title {
    grid-column: 1 / -1;
  }
}

.doubles-pair-form__info {
  margin: 0;
  color: #5b6684;
  font-size: 0.85rem;
  text-align: center;
}

.doubles-category__players summary {
  color: #3554f0;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.doubles-players {
  display: grid;
  gap: 0.45rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.doubles-player {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: #f8faff;
}

.doubles-player__info {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.doubles-player__info strong {
  color: #16224f;
  font-size: 0.88rem;
}

.doubles-player__info span {
  color: #6b7591;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.doubles-pair .doubles-pair-members {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.doubles-pair__joiner {
  display: none;
}

.doubles-pair__manage {
  grid-column: 1 / -1;
}

.doubles-pair__manage summary {
  margin-left: 2.45rem;
}

.doubles-pair__manage[open] .doubles-pair-actions {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #dfe4f0;
}

.doubles-pair__manage .doubles-pair-substitute-form {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .doubles-pair__manage .doubles-pair-substitute-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Formulario de liga: el título de cada bloque dentro de la tarjeta */
#modal-overlay .league-form__section > legend {
  float: left;
  width: 100%;
  margin: 0 0 0.25rem;
  padding: 0;
  color: #16224f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#modal-overlay .league-form__section > legend + * {
  clear: both;
}

#modal-overlay .form--modal .filter-chips {
  margin-top: 0.1rem;
}

#modal-overlay .form--modal .filter-chip {
  min-height: 2.4rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
}

/* En los formularios las etiquetas se reparten en varias líneas */
#modal-overlay .form--modal .filter-chips {
  flex-wrap: wrap;
  min-width: 0;
  margin: 0.1rem 0 0;
  padding: 0;
  overflow: visible;
}

#modal-overlay .form--modal input[type='file'] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

#modal-overlay .league-poster-upload .current-poster-preview img {
  max-width: 100% !important;
  height: auto;
}

#modal-overlay button.danger-secondary {
  padding: 0.5rem 1rem;
  border: 1px solid #f5c2c7;
  border-radius: 999px;
  background: #fff5f5;
  color: #b91c1c;
  font-weight: 700;
}

/* ==========================================================================
   Inscripciones de categorías de liga
   ========================================================================== */
.category-card__roster-button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid #e3e8f2;
  border-radius: 14px;
  background: #f8faff;
  box-shadow: none;
  color: #16224f;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.category-card__roster-button::after {
  content: '›';
  margin-left: auto;
  color: #7a849e;
  font-size: 1.3rem;
  line-height: 1;
}

.category-card__roster-avatars {
  display: flex;
  flex-shrink: 0;
}

.category-card__roster-avatars .player-avatar {
  width: 2rem;
  height: 2rem;
  border: 2px solid #ffffff;
}

.category-card__roster-avatars .player-avatar + .player-avatar {
  margin-left: -0.6rem;
}

.category-card__roster-label {
  font-size: 0.9rem;
}

.enrollment-modal {
  --category-color: #3554f0;
  --category-color-soft: rgba(53, 84, 240, 0.12);
  display: grid;
  gap: 1rem;
}

.enrollment-modal__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.enrollment-modal__stat {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.7rem 0.5rem;
  border-radius: 14px;
  background: #f4f6fb;
}

.enrollment-modal__stat strong {
  color: #16224f;
  font-size: 1.35rem;
  line-height: 1.1;
}

.enrollment-modal__stat span {
  color: #5b6684;
  font-size: 0.75rem;
  font-weight: 600;
}

.enrollment-modal__stat--main {
  background: var(--category-color-soft);
}

.enrollment-modal__stat--main strong {
  color: var(--category-color);
}

.enrollment-modal__stat--warning {
  background: #fff4e5;
}

.enrollment-modal__stat--warning strong {
  color: #c2410c;
}

.enrollment-modal__add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #ffffff;
}

.enrollment-modal__add-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: #16224f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enrollment-modal__add-field select {
  min-width: 0;
  border-radius: 12px;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
}

.enrollment-modal__section {
  display: grid;
  gap: 0.6rem;
}

.enrollment-modal__section[hidden] {
  display: none;
}

.enrollment-modal__title {
  margin: 0;
  color: #16224f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.enrollment-modal__search {
  width: 100%;
  border-radius: 12px;
}

.enrollment-modal__search[hidden] {
  display: none;
}

.enrollment-modal__list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.enrollment-modal__empty {
  padding: 0.9rem;
  border-radius: 14px;
  background: #f8faff;
  color: #5b6684;
  font-size: 0.9rem;
  text-align: center;
}

.enrollment-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e7ebf4;
  border-radius: 14px;
  background: #ffffff;
}

.enrollment-person[hidden] {
  display: none;
}

.enrollment-person__info {
  display: grid;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}

.enrollment-person__info strong {
  color: #16224f;
  font-size: 0.92rem;
  line-height: 1.25;
}

.enrollment-person__meta {
  color: #6b7591;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.enrollment-person__remove {
  flex-shrink: 0;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid #f5c2c7;
  border-radius: 999px;
  background: #fff5f5;
  box-shadow: none;
  color: #b91c1c;
  font-size: 0.78rem;
  font-weight: 700;
}

.enrollment-person--request {
  flex-wrap: wrap;
  border-color: #f3c48f;
  border-left: 4px solid #f59e0b;
  background: #fffaf3;
}

.enrollment-person__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.enrollment-person__actions button {
  margin: 0;
}

.enrollment-modal__manage {
  width: 100%;
}

/* ==========================================================================
   Administración · Usuarios
   ========================================================================== */
.users-page__intro {
  margin-bottom: 1.1rem;
}

#user-directory-card.users-card {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem;
}

.users-toolbar > button {
  margin: 0;
}

.users-toolbar__create:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.users-toolbar__create::before {
  content: '+';
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.users-toolbar__more {
  position: relative;
}

.users-toolbar__more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1rem;
  border: 1px solid #dfe4f0;
  border-radius: 999px;
  background: #ffffff;
  color: #33406b;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.users-toolbar__more summary::-webkit-details-marker {
  display: none;
}

.users-toolbar__more summary::after {
  content: '▾';
  font-size: 0.8rem;
}

.users-toolbar__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  right: 0;
  display: grid;
  gap: 0.4rem;
  min-width: 15rem;
  padding: 0.6rem;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 40px -18px rgba(22, 34, 79, 0.45);
}

.users-toolbar__menu button {
  width: 100%;
  margin: 0;
  justify-content: flex-start;
  text-align: left;
}

@media (max-width: 640px) {
  .users-toolbar > button,
  .users-toolbar__more {
    flex: 1 1 0;
    min-width: 0;
  }

  .users-toolbar__create {
    flex-basis: 100% !important;
    justify-content: center;
  }

  .users-toolbar__more summary {
    width: 100%;
    justify-content: center;
  }

  .users-toolbar__menu {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

#user-directory-card .users-filters {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
}

.users-filters__row {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 700px) {
  .users-filters__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.users-filters__more summary {
  width: fit-content;
  color: #3554f0;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.users-filters__more-body {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.85rem;
  border-radius: 14px;
  background: #f4f6fb;
}

@media (min-width: 700px) {
  .users-filters__more-body {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.users-filters__more-body label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  color: #16224f;
  font-size: 0.8rem;
  font-weight: 700;
}

.users-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #5b6684;
  font-size: 0.88rem;
}

.users-summary strong {
  color: #16224f;
  font-size: 1.1rem;
}

#user-directory-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  #user-directory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

#user-directory-list > li.user-row {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px -22px rgba(22, 34, 79, 0.5);
  overflow: hidden;
}

.user-row__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.45rem;
}

.user-row__identity {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.user-row__name {
  color: #16224f;
  font-size: 1.02rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.user-row__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.user-row__role {
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: #eef1f8;
  color: #4a557a;
  font-size: 0.7rem;
  font-weight: 700;
}

.user-row__role--admin {
  background: #16224f;
  color: #ffffff;
}

.user-row__role--league_tournament_admin {
  background: #ede9fe;
  color: #6d28d9;
}

.user-row__role--court_manager {
  background: #e0f2fe;
  color: #0369a1;
}

.user-row__member {
  grid-column: 1 / -1;
  width: fit-content;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.user-row__member--verified {
  background: #dcfce7;
  color: #166534;
}

.user-row__member--pending {
  background: #fff4e5;
  color: #c2410c;
}

.user-row__member--none {
  background: #f4f6fb;
  color: #7a849e;
}

.user-row__contact {
  display: grid;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-radius: 14px;
  background: #f8faff;
}

.user-row__email {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: #33406b;
  font-size: 0.85rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.user-row__email svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #7a849e;
}

.user-row__phone {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #16224f;
  font-size: 0.9rem;
  font-weight: 700;
}

.user-row__action {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

.user-row__action:first-of-type {
  margin-left: auto;
}

.user-row__action svg {
  width: 1rem;
  height: 1rem;
}

.user-row__action--call {
  background: #e0e8ff;
  color: #3554f0;
}

.user-row__action--whatsapp {
  background: #dcfce7;
  color: #16a34a;
}

.user-row__facts,
.user-row__consents {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.user-row__fact {
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: #f4f6fb;
  color: #4a557a;
  font-size: 0.75rem;
  font-weight: 600;
}

.user-row__fact--wins {
  background: #dcfce7;
  color: #166534;
  font-weight: 800;
}

.user-row__fact--losses {
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 800;
}

/* Jugador externo al que aún le falta el DNI/NIE */
.user-row__fact--warning {
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
}

.user-row__consent {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.user-row__consent svg {
  width: 0.9rem;
  height: 0.9rem;
}

.user-row__consent--ok {
  color: #15803d;
}

.user-row__consent--no {
  color: #9ca3af;
}

.user-row__consent + .user-row__consent {
  margin-left: 0.5rem;
}

.user-row__notes {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid #cbe843;
  border-radius: 8px;
  background: #fbfde9;
  color: #4a557a;
  font-size: 0.8rem;
}

.user-row__actions {
  display: flex;
  gap: 0.5rem;
}

.user-row__actions button {
  flex: 1;
  margin: 0;
}

.users-pagination {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.users-pagination button {
  min-width: 8.5rem;
  margin: 0;
}

.users-toolbar__more summary,
.users-toolbar > button {
  white-space: nowrap;
}

.users-toolbar {
  position: relative;
}

.users-toolbar__menu button {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}

@media (max-width: 640px) {
  .users-toolbar__more {
    position: static;
  }

  .users-toolbar__menu {
    top: calc(100% + 0.4rem);
  }
}

/* ==========================================================================
   Panel de Torneos (mismo esquema que el Panel de Ligas)
   ========================================================================== */
.tournament-dashboard__intro {
  margin-bottom: 1.1rem;
}

.tournament-dashboard__sport {
  display: grid;
  gap: 1.25rem;
}

.tournament-dashboard__sport[hidden] {
  display: none;
}

.tournament-dashboard__card {
  padding: 0 !important;
  overflow: hidden;
}

.tournament-dashboard__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem 1.1rem;
  border-bottom: 1px solid #e6eaf3;
  background: #f6f8fc;
}

.tournament-dashboard__card-header h3 {
  margin: 0;
  color: #16224f;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tournament-dashboard__card-header .card-subtitle {
  margin: 0.15rem 0 0;
}

.tournament-dashboard__icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: #3554f0;
}

.tournament-dashboard__card > .card-collection,
.tournament-dashboard__card > ul {
  margin: 0;
  padding: 1rem;
}

.tournament-dashboard__grid {
  display: grid;
  gap: 1.25rem;
  margin: 0;
}

@media (min-width: 900px) {
  .tournament-dashboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Categorías nuevas al crear un torneo */
.tournament-form__new-categories {
  display: grid;
  gap: 0.6rem;
}

.league-form__category-row.tournament-form__category-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.tournament-form__category-row select {
  min-width: 0;
}

/* En móvil hay una regla global «h3 { font-size !important }»: los títulos de
   sección de los formularios mantienen su tamaño */
#modal-overlay .form--modal .form-section__title,
#modal-overlay .form--modal .form-section--card > :is(h3, h4):first-child,
#modal-overlay .form--modal .form-section--card .form-section__header :is(h3, h4) {
  font-size: 0.78rem !important;
}

#modal-overlay .form--modal .form-section--card .form-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#modal-overlay .form--modal .form-section__header button {
  width: auto;
  margin: 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
}

/* Filas de categorías nuevas del torneo: nombre arriba, tres selectores debajo */
.league-form__category-row.tournament-form__category-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.tournament-form__category-row [data-field='name'] {
  grid-column: 1 / 4;
  grid-row: 1;
}

.tournament-form__category-row .league-form__remove-category {
  grid-column: 4;
  grid-row: 1;
}

.tournament-form__category-row [data-field='drawSize'] {
  grid-column: 3 / 5;
}

.tournament-form__category-row select {
  padding: 0.5rem 1.6rem 0.5rem 0.6rem;
  font-size: 0.85rem;
}

@media (max-width: 559px) {
  .league-form__category-row.tournament-form__category-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }

  .tournament-form__category-row [data-field='name'] {
    grid-column: 1 / 3;
  }

  .tournament-form__category-row .league-form__remove-category {
    grid-column: 3;
  }

  .tournament-form__category-row [data-field='matchType'] {
    grid-column: 2 / 4;
  }

  .tournament-form__category-row [data-field='drawSize'] {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Torneos · Partidos
   ========================================================================== */
.tournament-matches__intro {
  margin-bottom: 1.1rem;
}

#tournament-matches-card.tournament-matches-card {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.tournament-matches__filters {
  display: grid;
  gap: 0.85rem;
}

.tournament-matches__filters .player-filter[hidden] {
  display: none;
}

.tournament-order-box:not([hidden]) {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #f8faff;
}

.tournament-order-box__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.tournament-order-box__head svg {
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
  padding: 0.45rem;
  border-radius: 12px;
  background: #e0e8ff;
  color: #3554f0;
}

.tournament-order-box__head div {
  display: grid;
  gap: 0.1rem;
}

.tournament-order-box__head strong {
  color: #16224f;
  font-size: 0.95rem;
}

.tournament-order-box__head span {
  color: #5b6684;
  font-size: 0.8rem;
}

.tournament-order-box__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: end;
}

.tournament-order-box__field {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  color: #16224f;
  font-size: 0.78rem;
  font-weight: 700;
}

.tournament-order-box__field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-radius: 12px;
}

.tournament-order-box__fields button {
  grid-column: 1 / -1;
  margin: 0;
}

@media (min-width: 760px) {
  .tournament-order-box__fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .tournament-order-box__fields button {
    grid-column: auto;
  }
}

#tournament-matches-list.tournament-matches__groups {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.tournament-matches__groups .tournament-match-group__header {
  padding: 0 0 0.6rem;
  border-bottom: 2px solid #e6eaf3;
}

.tournament-matches__groups .tournament-match-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #16224f;
  font-size: 1.05rem !important;
  font-weight: 800;
}

.tournament-matches__groups .tournament-match-group__title::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #3554f0;
}

.tournament-match-group--pending .tournament-match-group__title::before {
  background: #f59e0b;
}

.tournament-match-group--completed .tournament-match-group__title::before {
  background: #22c55e;
}

.tournament-matches__groups .tournament-match-group__count {
  flex-shrink: 0;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: #eef1f8;
  color: #4a557a;
  font-size: 0.75rem;
  font-weight: 700;
}

.tournament-matches__groups .tournament-match-group__empty {
  padding: 0.9rem;
  border-radius: 14px;
  background: #f8faff;
  font-size: 0.88rem;
  text-align: center;
}

#tournament-matches-list > li.tournament-match-group {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#tournament-matches-list .tournament-match-item__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

#tournament-matches-list .tournament-match-item__actions > button {
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
}

.tournament-attendance {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border: 1px dashed #f3c48f;
  border-radius: 14px;
  background: #fffaf3;
}

.tournament-attendance__title {
  color: #c2410c;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tournament-attendance__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.4rem;
}

.tournament-attendance__name {
  min-width: 0;
  overflow: hidden;
  color: #16224f;
  font-size: 0.85rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-attendance__row button {
  margin: 0;
  padding: 0.35rem 0.65rem !important;
  border-radius: 999px;
  font-size: 0.75rem !important;
  white-space: nowrap;
}

.tournament-attendance,
.tournament-attendance__name {
  text-align: left;
}

/* ==========================================================================
   Acceso: inicio de sesión y registro
   ========================================================================== */
#auth-view.auth-view:not([hidden]) {
  display: block;
  min-height: 100vh;
  padding: 0;
  background: #f2f4fa;
}

#auth-view .auth-layout {
  display: grid;
  min-height: 100vh;
}

@media (min-width: 960px) {
  #auth-view .auth-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

/* Portada con la pista de tenis */
#auth-view .auth-hero {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.75rem;
  padding: 2rem 1.5rem 3.5rem;
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(160deg, rgba(14, 26, 70, 0.92), rgba(37, 60, 190, 0.86)),
    url('/app/assets/court.svg') center / cover no-repeat,
    #16224f;
}

#auth-view .auth-hero::after {
  content: '';
  position: absolute;
  right: -3.5rem;
  bottom: -3.5rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e3f56f, #b6d935);
  opacity: 0.9;
  box-shadow: inset -12px -12px 0 rgba(0, 0, 0, 0.08);
}

#auth-view .auth-hero > * {
  position: relative;
  z-index: 1;
}

#auth-view .auth-hero__logo {
  padding: 0.6rem;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.6);
}

#auth-view #auth-club-logo {
  width: 84px;
  height: 84px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#auth-view .auth-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  color: #dcf56b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#auth-view .tennis-ball {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

#auth-view .auth-hero__title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

#auth-view .auth-hero__text {
  max-width: 30rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.55;
}

#auth-view .auth-hero__features {
  display: none;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

#auth-view .auth-hero__features li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

@media (min-width: 960px) {
  #auth-view .auth-hero {
    padding: 3rem 4rem;
  }

  #auth-view .auth-hero::after {
    width: 18rem;
    height: 18rem;
    right: -5rem;
    bottom: -5rem;
  }

  #auth-view .auth-hero__features {
    display: grid;
  }
}

/* Tarjeta del formulario */
#auth-view .auth-card {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 1.25rem;
  width: auto;
  max-width: none;
  margin: -2rem 0.75rem 1.5rem;
  padding: 1.25rem 1.1rem 1.5rem;
  border: 1px solid #e3e8f2;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 50px -30px rgba(22, 34, 79, 0.45);
}

@media (min-width: 560px) {
  #auth-view .auth-card {
    width: min(480px, calc(100% - 2rem));
    margin: -2rem auto 2rem;
    padding: 1.75rem 2rem 2rem;
  }
}

@media (min-width: 960px) {
  #auth-view .auth-card {
    align-self: center;
    margin: 2.5rem auto;
  }
}

/* Selector de pestañas */
#auth-view .auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  margin: 0;
  padding: 0.3rem;
  border-radius: 999px;
  background: #eef1f8;
}

#auth-view .auth-tabs .tab-button {
  margin: 0;
  padding: 0.65rem 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #4a557a;
  font-weight: 700;
}

#auth-view .auth-tabs .tab-button.active {
  background: #16224f;
  color: #ffffff;
  box-shadow: 0 6px 16px -8px rgba(22, 34, 79, 0.7);
}

/* Formularios */
#auth-view .auth-form {
  display: grid;
  gap: 1rem;
}

#auth-view .auth-form[hidden],
#auth-view .auth-form__stack[hidden] {
  display: none;
}

#auth-view .auth-form__stack {
  display: grid;
  gap: 1rem;
}

#auth-view .auth-form__intro h2 {
  margin: 0;
  color: #16224f;
  font-size: 1.45rem !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#auth-view .auth-form__intro p {
  margin: 0.25rem 0 0;
  color: #5b6684;
  font-size: 0.92rem;
}

#auth-view .auth-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: #16224f;
  font-size: 0.85rem;
  font-weight: 700;
}

#auth-view .auth-field em {
  color: #8a93ad;
  font-style: normal;
  font-weight: 600;
}

#auth-view .auth-field :is(input:not([type='checkbox']):not([type='file']), select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid #dfe4f0;
  border-radius: 14px;
  background: #f8faff;
  color: #16224f;
  font-size: 1rem;
  font-weight: 500;
}

#auth-view .auth-field :is(input, select, textarea):focus {
  border-color: #3554f0;
  outline: none;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(53, 84, 240, 0.15);
}

#auth-view .auth-field input[type='file'] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0.55rem;
  border: 1px dashed #cfd6e6;
  border-radius: 14px;
  background: #f8faff;
  font-size: 0.85rem;
}

#auth-view .auth-field .form-hint {
  font-weight: 500;
}

#auth-view .auth-password {
  position: relative;
  display: block;
}

#auth-view .auth-password input {
  padding-right: 3rem !important;
}

#auth-view .auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: #7a849e;
  transform: translateY(-50%);
  cursor: pointer;
}

#auth-view .auth-password-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
}

#auth-view .auth-password-toggle.is-active {
  background: #e0e8ff;
  color: #3554f0;
}

#auth-view .auth-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#auth-view .auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #4a557a;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

#auth-view .auth-remember input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: #3554f0;
}

#auth-view .auth-link {
  width: auto;
  margin: 0;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #3554f0;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

#auth-view .auth-submit {
  width: 100%;
  margin: 0.25rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 999px;
  font-size: 1.02rem;
}

#auth-view .auth-form .form-actions {
  display: flex;
  gap: 0.6rem;
  margin: 0;
}

#auth-view .auth-form .form-actions button {
  flex: 1;
  margin: 0;
}

#auth-view .auth-form__success {
  justify-items: center;
  text-align: center;
}

#auth-view .auth-form__success-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-size: 1.6rem;
  font-weight: 800;
}

/* Registro por secciones */
#auth-view .auth-section {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: #ffffff;
}

#auth-view .auth-section > legend {
  float: left;
  width: 100%;
  margin: 0 0 0.15rem;
  padding: 0;
  color: #16224f;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#auth-view .auth-section > legend + * {
  clear: both;
}

#auth-view .auth-grid {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 420px) {
  #auth-view .auth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#auth-view .filter-chips {
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  overflow: visible;
}

#auth-view .filter-chip {
  min-height: 2.4rem;
  font-size: 0.9rem;
}

#auth-view .auth-consents {
  display: grid;
  gap: 0.6rem;
}

#auth-view .auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid #c8e6c9;
  border-radius: 14px;
  background: #f0f9f0;
  color: #24324f;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
}

#auth-view .auth-consent--required {
  border-color: #dfe4f0;
  background: #f8faff;
}

#auth-view .auth-consent input {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin: 0.1rem 0 0;
  accent-color: #3554f0;
}

#auth-view .auth-consent a {
  color: #3554f0;
  font-weight: 700;
}

/* Nombre de la liga o torneo de cada inscripción activa */
.home-stat__enrollments {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.home-stat__enrollments[hidden] {
  display: none;
}

.home-stat__enrollment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.55rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 4px solid var(--enrollment-color, #dcf56b);
  border-radius: 12px;
  background: rgba(10, 20, 70, 0.35);
  backdrop-filter: blur(4px);
  color: #ffffff;
}

.home-stat__enrollment-type {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #dcf56b;
  color: #16224f;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-stat__enrollment-name {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.home-stat__enrollment-category {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 600;
}

.home-stat__enrollment--more {
  border-left-width: 1px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-weight: 700;
}

/* ==========================================================================
   Rankings: fondos degradados animados (sustituyen al destello del líder)
   ========================================================================== */
@keyframes psm-gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes psm-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-1.2rem, 0.8rem) scale(1.15); }
}

/* Tarjeta del líder: degradado del color de la categoría que fluye */
.home-ranking__leader {
  background-image: linear-gradient(
    120deg,
    color-mix(in srgb, var(--category-color, #2c4aa0) 92%, #16224f) 0%,
    color-mix(in srgb, var(--category-color, #2c4aa0) 55%, #16224f) 35%,
    color-mix(in srgb, var(--category-color, #2c4aa0) 80%, #ffffff 20%) 65%,
    color-mix(in srgb, var(--category-color, #2c4aa0) 70%, #16224f) 100%
  );
  background-size: 300% 300%;
}

.home-ranking__leader::before {
  content: '';
  position: absolute;
  bottom: -2.5rem;
  left: 30%;
  z-index: -1;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 245, 107, 0.35), transparent 70%);
  pointer-events: none;
}

/* Filas del podio: oro (color de la categoría), plata y bronce */
.home-ranking__row--leader,
.home-ranking__row--second,
.home-ranking__row--third {
  background-size: 250% 100% !important;
}

.home-ranking__row--leader {
  background-image: linear-gradient(
    90deg,
    var(--category-color-soft, rgba(220, 245, 107, 0.25)) 0%,
    color-mix(in srgb, var(--category-color, #c99a2e) 22%, #ffffff) 50%,
    var(--category-color-soft, rgba(220, 245, 107, 0.25)) 100%
  ) !important;
}

.home-ranking__row--second {
  background-image: linear-gradient(90deg, #f3f5fa 0%, #e3e8f2 50%, #f3f5fa 100%);
}

.home-ranking__row--third {
  background-image: linear-gradient(90deg, #fbf4ee 0%, #f3e2d3 50%, #fbf4ee 100%);
}

@media (prefers-reduced-motion: no-preference) {
  /* El destello en diagonal no casaba con el círculo decorativo: se sustituye */
  .home-ranking__leader::after {
    top: -3rem;
    right: -2rem;
    bottom: auto;
    left: auto;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    transform: none;
    animation: psm-orb-float 7s ease-in-out infinite;
  }

  .home-ranking__leader {
    animation: psm-gradient-flow 9s ease-in-out infinite;
  }

  .home-ranking__leader::before {
    animation: psm-orb-float 9s ease-in-out infinite reverse;
  }

  .home-ranking__row--leader,
  .home-ranking__row--second,
  .home-ranking__row--third {
    animation:
      psm-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both,
      psm-gradient-flow 6s ease-in-out 0.5s infinite;
  }

  .home-ranking__row--second {
    animation-delay: 0.05s, 0.8s;
  }

  .home-ranking__row--third {
    animation-delay: 0.1s, 1.1s;
  }

  /* El brillo de los puntos del líder pasa a ser continuo y suave */
  .home-ranking__row--leader .home-ranking__points {
    animation:
      psm-pop 0.5s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both,
      psm-glow 3s 0.8s ease-in-out infinite;
  }
}

/* ==========================================================================
   Notificar liga o torneo: destinatarios y vista previa del correo
   ========================================================================== */
.announcement-audience {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.announcement-audience__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border-radius: 14px;
  background: #e0e8ff;
  color: #3554f0;
}

.announcement-audience__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.announcement-audience > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.announcement-audience strong {
  color: #16224f;
  font-size: 1rem;
}

.announcement-audience span {
  color: #4a557a;
  font-size: 0.88rem;
}

.announcement-audience .announcement-audience__channels {
  width: fit-content;
  margin-top: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #f4f6fb;
  color: #5b6684;
  font-size: 0.75rem;
  font-weight: 700;
}

.announcement-preview {
  display: grid;
  gap: 0.5rem;
}

.announcement-preview__subject {
  color: #4a557a;
  font-size: 0.82rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.announcement-preview__frame {
  width: 100%;
  height: 560px;
  border: 1px solid #e3e8f2;
  border-radius: 14px;
  background: #eef1f8;
}

/* ==========================================================================
   Histórico de ligas y torneos: métricas como las de Inicio y tarjetas de liga
   ========================================================================== */
.home-stats.history-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.4rem;
}

.history-stats .home-stat {
  min-height: 9.5rem;
}

.history-stats .home-stat--enrollments {
  grid-column: auto;
  grid-row: auto;
}

@media (max-width: 1024px) {
  .home-stats.history-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .home-stats.history-stats {
    gap: 0.6rem;
  }

  .history-stats .home-stat {
    min-height: 8.5rem;
    padding: 0.85rem;
  }

  .history-stats .home-stat__label {
    font-size: 0.85rem;
  }

  .history-stats .home-stat__foot {
    font-size: 0.75rem;
  }
}

#league-history-list {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#league-history-list > li.league-history-item {
  display: grid;
  gap: 0.75rem;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none;
}

.league-history-card.home-competition {
  grid-template-columns: minmax(9rem, 26%) minmax(0, 1fr);
  box-shadow: 0 14px 30px -24px rgba(22, 34, 79, 0.6);
}

.league-history-card .home-competition__body {
  gap: 0.6rem;
}

.league-history-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.league-history-stats__item {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: #f1f4fb;
  color: #4a5578;
  font-size: 0.82rem;
  font-weight: 600;
}

.league-history-stats__item strong {
  color: #16224f;
  font-weight: 800;
}

.league-history-champions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.league-history-champions__item {
  --category-color: #3554f0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #e3e8f2;
  border-left: 4px solid var(--category-color);
  border-radius: 12px;
  background: linear-gradient(135deg, #fffbea 0%, #ffffff 65%);
}

.league-history-champions__item svg {
  grid-row: span 2;
  color: #c9a227;
}

.league-history-champions__category {
  color: #6b7491;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.league-history-champions__item strong {
  overflow: hidden;
  color: #16224f;
  font-size: 0.95rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-history-details {
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #ffffff;
}

.league-history-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  color: #16224f;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.league-history-details > summary::-webkit-details-marker {
  display: none;
}

.league-history-details > summary::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.league-history-details[open] > summary::after {
  transform: rotate(-135deg);
}

.league-history-details > .league-ranking-group {
  display: grid;
  gap: 1.5rem;
  padding: 0 1rem 1rem;
}

@media (max-width: 640px) {
  .league-history-card.home-competition {
    grid-template-columns: minmax(0, 1fr);
  }

  .league-history-card .home-competition__visual {
    min-height: 11rem;
    max-height: 13rem;
  }

  .league-history-details > .league-ranking-group {
    padding: 0 0.6rem 0.8rem;
  }
}

/* ==========================================================================
   Dividir una categoría de liga en divisiones y reasignar a los inscritos
   ========================================================================== */
.category-split__intro {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff, #f8faff);
}

.category-split__intro > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.category-split__intro strong {
  color: #16224f;
  font-size: 1rem;
  font-weight: 800;
}

.category-split__intro span:not(.category-split__icon) {
  color: #4a5578;
  font-size: 0.86rem;
}

.category-split__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: #3554f0;
  color: #ffffff;
}

.category-split__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.category-split__division-list {
  display: grid;
  gap: 0.6rem;
}

.category-split__division {
  --division-color: #3554f0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    'badge name count remove'
    'badge colors colors colors';
  align-items: center;
  gap: 0.45rem 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e3e8f2;
  border-left: 4px solid var(--division-color);
  border-radius: 14px;
  background: #ffffff;
  min-width: 0;
}

.category-split__division-badge {
  grid-area: badge;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 12px;
  background: var(--division-color);
  color: #ffffff;
  font-weight: 800;
}

.category-split__division input[type='text'] {
  grid-area: name;
  min-width: 0;
  width: 100%;
}

.category-split__colors {
  grid-area: colors;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.category-split__swatch {
  width: 1.45rem !important;
  min-width: 0 !important;
  height: 1.45rem;
  min-height: 0 !important;
  padding: 0 !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: var(--swatch-color) !important;
  box-shadow: 0 0 0 1px #d5dcec;
  cursor: pointer;
}

.category-split__swatch[aria-pressed='true'] {
  box-shadow: 0 0 0 2px var(--swatch-color);
}

.category-split__division-count {
  grid-area: count;
  color: #4a5578;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.category-split__remove {
  grid-area: remove;
}

.category-split__division-tools {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.6rem;
}

.category-split__division-tools > button,
.category-split__players-toolbar > button {
  width: auto;
  min-height: 2.2rem;
  padding: 0.35rem 0.9rem;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 700;
}

.category-split__players-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.category-split__player-list {
  display: grid;
  gap: 0.45rem;
  max-height: 24rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.category-split__player {
  --division-color: #3554f0;
  display: grid;
  grid-template-columns: 1.6rem auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #e3e8f2;
  border-left: 4px solid var(--division-color);
  border-radius: 12px;
  background: #ffffff;
}

.category-split__player--blocked {
  border-color: #f3b8b8;
  background: #fff5f5;
}

.category-split__rank {
  color: #6b7491;
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
}

.category-split__player-info {
  display: grid;
  min-width: 0;
}

.category-split__player-info strong {
  overflow: hidden;
  color: #16224f;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-split__player-info small {
  color: #8a6d1c;
  font-size: 0.74rem;
  font-weight: 600;
}

.category-split__player--blocked .category-split__player-info small {
  color: #b91c1c;
}

.category-split__choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
}

.category-split__choice {
  --division-color: #3554f0;
  width: auto !important;
  min-width: 2.3rem;
  min-height: 2rem !important;
  padding: 0.2rem 0.5rem !important;
  border: 1px solid #d5dcec !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #4a5578 !important;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.category-split__choice[aria-pressed='true'] {
  border-color: var(--division-color) !important;
  background: var(--division-color) !important;
  color: #ffffff !important;
}

.category-split__choice:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 520px) {
  .category-split__division {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'badge name remove'
      'badge colors colors'
      'badge count count';
  }

  .category-split__player {
    grid-template-columns: 1.4rem auto minmax(0, 1fr);
  }

  .category-split__choices {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Torneos: cabecera de la ficha con las acciones (como en ligas) */
#tournament-detail-card .card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

#tournament-detail-card .card-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #16224f;
}

#tournament-detail-actions > button:not([hidden]) {
  flex: 0 0 auto;
  width: auto;
  min-height: 2.3rem;
  padding: 0.4rem 0.95rem;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
}

#section-tournaments > .league-switcher + #tournament-detail-card,
#section-tournaments > .leagues-admin__intro + .league-switcher[hidden] + #tournament-detail-card {
  margin-top: 0;
}

#tournament-detail-subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.tournament-detail__dates {
  color: #6b7491;
  font-size: 0.86rem;
  font-weight: 600;
}

.tournament-section--single {
  margin: 0;
  padding: 0;
}

@media (max-width: 640px) {
  .league-switcher__list > li.list-heading {
    display: none;
  }
}

/* ==========================================================================
   Pie de la app: logo del club enlazado al portal del socio
   ========================================================================== */
.site-footer {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 2rem 1rem 2.25rem;
  border-top: 1px solid #e3e8f2;
  background: #f8f9fc;
  color: #4a5578;
  font-size: 0.92rem;
  text-align: center;
}

.site-footer__club {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
  border: 1px solid #e3e8f2;
  border-radius: 20px;
  background: #ffffff;
  color: #16224f;
  text-decoration: none;
  box-shadow: 0 12px 26px -22px rgba(22, 34, 79, 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-footer__club:hover,
.site-footer__club:focus-visible {
  border-color: #c5cff0;
  box-shadow: 0 16px 30px -20px rgba(53, 84, 240, 0.55);
  transform: translateY(-1px);
}

.site-footer__club img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
}

.site-footer__club-text {
  display: grid;
  gap: 0.15rem;
  text-align: left;
}

.site-footer__club-text strong {
  font-size: 1rem;
  font-weight: 800;
}

.site-footer__club-text strong::after {
  content: ' ↗';
  color: #3554f0;
}

.site-footer__club-text span {
  color: #6b7491;
  font-size: 0.82rem;
  font-weight: 600;
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.75rem;
}

.site-footer .footer-links a {
  color: #3554f0;
  font-weight: 600;
  text-decoration: none;
}

.site-footer .footer-links a:hover {
  text-decoration: underline;
}

.site-footer .footer-links span {
  color: #a3abc2;
}

.site-footer__copy {
  color: #8a92ab;
  font-size: 0.82rem;
}

/* ==========================================================================
   Desplegable de notificaciones (rediseño)
   ========================================================================== */
#notification-popover .notification-popover__header {
  padding: 1rem 1.1rem 0.9rem;
  background: linear-gradient(135deg, #16224f 0%, #24357a 100%);
  border-bottom: 0;
  color: #ffffff;
}

#notification-popover .notification-popover__header h3 {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  font-weight: 800;
}

#notification-popover .notification-popover__header p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
}

#notification-popover #notification-mark-all-read {
  flex: 0 0 auto;
  width: auto !important;
  min-height: 2.1rem;
  padding: 0.35rem 0.85rem !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-size: 0.8rem;
  font-weight: 700;
}

#notification-popover #notification-mark-all-read:disabled {
  opacity: 0.45;
}

#notification-popover .notification-popover__content {
  padding: 0.5rem;
  background: #f4f6fb;
}

#notification-popover .notification-popover__list {
  display: grid;
  gap: 0.45rem;
}

#notification-popover .notification-popover__item {
  --notification-color: #3554f0;
  --notification-soft: #eef2ff;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.25rem;
  padding: 0;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 18px -16px rgba(22, 34, 79, 0.55);
}

#notification-popover .notification-popover__item--torneos {
  --notification-color: #9333ea;
  --notification-soft: #f5edff;
}

#notification-popover .notification-popover__item--reservas {
  --notification-color: #059669;
  --notification-soft: #e7f8f1;
}

#notification-popover .notification-popover__item--administracion {
  --notification-color: #ca8a04;
  --notification-soft: #fdf6e3;
}

#notification-popover .notification-popover__item--general {
  --notification-color: #0891b2;
  --notification-soft: #e6f6fa;
}

#notification-popover .notification-popover__item--read {
  background: #fbfcfe;
  box-shadow: none;
}

#notification-popover .notification-popover__item--read .notification-popover__icon {
  filter: grayscale(0.5);
  opacity: 0.7;
}

#notification-popover .notification-popover__open {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.7rem;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.75rem 0 0.75rem 0.75rem !important;
  border: 0 !important;
  border-radius: 16px 0 0 16px !important;
  background: transparent !important;
  color: inherit !important;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

#notification-popover .notification-popover__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: var(--notification-soft);
  color: var(--notification-color);
}

#notification-popover .notification-popover__body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

#notification-popover .notification-popover__top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

#notification-popover .notification-popover__category {
  color: var(--notification-color);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#notification-popover .notification-popover__meta {
  color: #8a92ab;
  font-size: 0.74rem;
  font-weight: 600;
}

#notification-popover .notification-popover__dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

#notification-popover .notification-popover__title {
  color: #16224f;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
}

#notification-popover .notification-popover__item--read .notification-popover__title {
  font-weight: 600;
  color: #4a5578;
}

#notification-popover .notification-popover__message {
  display: -webkit-box;
  overflow: hidden;
  color: #5b6584;
  font-size: 0.84rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#notification-popover .notification-popover__quick-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.65rem 0.6rem 0 0;
}

#notification-popover .notification-popover__icon-btn {
  display: grid;
  place-items: center;
  width: 2rem !important;
  min-width: 0 !important;
  height: 2rem;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e3e8f2 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #3554f0 !important;
  cursor: pointer;
}

#notification-popover .notification-popover__icon-btn:hover {
  border-color: #c5cff0 !important;
  background: #eef2ff !important;
}

#notification-popover .notification-popover__icon-btn--danger {
  color: #dc2626 !important;
}

#notification-popover .notification-popover__icon-btn--danger:hover {
  border-color: #f3b8b8 !important;
  background: #fff5f5 !important;
}

#notification-popover .notification-popover__empty {
  margin: 1.5rem 1rem;
  color: #6b7491;
  text-align: center;
}

#notification-popover .notification-popover__footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid #e3e8f2;
  background: #ffffff;
}

#notification-popover #notification-view-all-button {
  width: 100%;
  min-height: 2.5rem;
  border-radius: 12px;
  font-weight: 700;
}

/* Página de notificaciones: misma tarjeta que el desplegable */
#notifications-container .notifications-group {
  margin-bottom: 1.5rem;
}

#notifications-container .notifications-group-title {
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
  color: #6b7491;
  font-size: 0.74rem !important;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#notifications-container .list {
  display: grid;
  gap: 0.6rem;
}

.notification-card {
  --notification-color: #3554f0;
  --notification-soft: #eef2ff;
}

#notifications-container .list > li.notification-card {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.35rem;
  align-items: start;
  padding: 0.9rem 1rem !important;
  border: 1px solid #e3e8f2 !important;
  border-left: 4px solid var(--notification-color) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px -20px rgba(22, 34, 79, 0.6);
}

#notifications-container .list > li.notification-card > :not(.notification-card__icon) {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}

#notifications-container .list > li.notification-card--torneos {
  --notification-color: #9333ea;
  --notification-soft: #f5edff;
}

#notifications-container .list > li.notification-card--reservas {
  --notification-color: #059669;
  --notification-soft: #e7f8f1;
}

#notifications-container .list > li.notification-card--administracion {
  --notification-color: #ca8a04;
  --notification-soft: #fdf6e3;
}

#notifications-container .list > li.notification-card--general {
  --notification-color: #0891b2;
  --notification-soft: #e6f6fa;
}

#notifications-container .list > li.notification-card.notification-list-item--read {
  border-left-color: #c9cfdd !important;
  background: #fbfcfe !important;
  box-shadow: none;
}

.notification-card__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 13px;
  background: var(--notification-soft);
  color: var(--notification-color);
}

.notification-list-item--read .notification-card__icon {
  filter: grayscale(0.6);
  opacity: 0.7;
}

#notifications-container .notification-card > strong {
  color: #16224f;
  font-size: 1rem;
  font-weight: 800;
}

#notifications-container .notification-card.notification-list-item--read > strong {
  color: #4a5578;
  font-weight: 700;
}

#notifications-container .notification-card > .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: #8a92ab;
  font-size: 0.78rem;
}

#notifications-container .notification-card > p {
  color: #4a5578;
  font-size: 0.9rem;
  line-height: 1.45;
}

#notifications-container .notification-card > .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

#notifications-container .notification-card > .actions > button {
  flex: 0 0 auto;
  width: auto !important;
  min-height: 2.1rem;
  padding: 0.3rem 0.85rem !important;
  border-radius: 10px !important;
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 480px) {
  #notifications-container .list > li.notification-card {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    column-gap: 0.65rem;
    padding: 0.8rem 0.8rem !important;
  }

  .notification-card__icon {
    width: 2.2rem;
    height: 2.2rem;
  }
}

/* Clasificaciones: columna de partidos perdidos */
.home-ranking__table .home-ranking__row {
  grid-template-columns: minmax(0, 1fr) 4.4rem 4.4rem 4.4rem 3.6rem;
  column-gap: 0.5rem;
}

.home-ranking__label-short {
  display: none;
}

.home-ranking__stat--losses {
  color: #b4513a;
}

.ranking-card {
  flex-wrap: wrap;
}

.ranking-card__record {
  flex: 1 0 100%;
  padding-left: 2.6rem;
  color: #6b7491;
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 640px) {
  .home-ranking__table .home-ranking__row {
    grid-template-columns: minmax(0, 1fr) 2.2rem 2.2rem 2.2rem 2.7rem;
    gap: 0.15rem;
  }

  .home-ranking__label-full {
    display: none;
  }

  .home-ranking__label-short {
    display: inline;
  }

  .home-ranking__table .home-ranking__stat {
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   Registro de envíos: avisos con lecturas, correos y push
   ========================================================================== */
#section-delivery-logs .delivery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.delivery-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.delivery-list > .empty-state {
  padding: 1.5rem;
  border-radius: 14px;
  background: #f6f8fc;
  text-align: center;
}

.delivery-item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 22px -20px rgba(22, 34, 79, 0.6);
}

.delivery-item__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 13px;
  background: #eef2ff;
  color: #3554f0;
}

.delivery-item__icon--email {
  background: #e6f6fa;
  color: #0891b2;
}

.delivery-item__icon--push {
  background: #f5edff;
  color: #9333ea;
}

.delivery-item__body {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.delivery-item__title {
  overflow: hidden;
  color: #16224f;
  font-size: 0.98rem;
  font-weight: 800;
  text-overflow: ellipsis;
}

.delivery-item__text {
  margin: 0;
  color: #5b6584;
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.delivery-item__error {
  margin: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  background: #fff5f5;
  color: #b91c1c;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.delivery-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: #8a92ab;
  font-size: 0.78rem;
  font-weight: 600;
}

.delivery-item__action {
  width: auto !important;
  min-height: 2.2rem;
  padding: 0.35rem 0.9rem !important;
  border-radius: 10px !important;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}

.delivery-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #f1f4fb;
  color: #4a5578;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.delivery-chip--ok {
  background: #e7f8f1;
  color: #047857;
}

.delivery-chip--error {
  background: #fde8e8;
  color: #b91c1c;
}

.delivery-chip--warn {
  background: #fdf6e3;
  color: #92400e;
}

.delivery-chip--read {
  background: #e6efff;
  color: #2443d6;
}

.delivery-chip--unread {
  background: #fff4e5;
  color: #b45309;
}

.delivery-chip--muted {
  background: #f1f4fb;
  color: #8a92ab;
}

.delivery-reads {
  display: grid;
  gap: 0.3rem;
  max-width: 28rem;
}

.delivery-reads__label {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  color: #4a5578;
  font-size: 0.82rem;
}

.delivery-reads__label strong {
  color: #16224f;
  font-size: 0.95rem;
}

.delivery-reads__label span {
  margin-left: auto;
  color: #3554f0;
  font-weight: 800;
}

.delivery-reads__bar {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edf6;
}

.delivery-reads__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3554f0, #6c86ff);
}

/* Modal de lectores */
.delivery-readers {
  display: grid;
  gap: 0.9rem;
}

.delivery-readers__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.delivery-readers__summary > div {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.7rem 0.5rem;
  border-radius: 14px;
  background: #f6f8fc;
}

.delivery-readers__summary strong {
  color: #16224f;
  font-size: 1.5rem;
  font-weight: 800;
}

.delivery-readers__summary > div:first-child strong {
  color: #2443d6;
}

.delivery-readers__summary > div:nth-child(2) strong {
  color: #b45309;
}

.delivery-readers__summary span {
  color: #6b7491;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#modal-overlay .delivery-readers__filters {
  flex-wrap: wrap;
  overflow: visible;
}

.delivery-readers__list {
  display: grid;
  gap: 0.45rem;
  max-height: 26rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.delivery-reader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #e3e8f2;
  border-left: 4px solid #3554f0;
  border-radius: 12px;
  background: #ffffff;
}

.delivery-reader--pendiente {
  border-left-color: #f59e0b;
}

.delivery-reader--eliminada {
  border-left-color: #c9cfdd;
}

.delivery-reader__info {
  display: grid;
  min-width: 0;
}

.delivery-reader__info strong {
  overflow: hidden;
  color: #16224f;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-reader__info span {
  overflow: hidden;
  color: #8a92ab;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-reader__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
}

@media (max-width: 640px) {
  .delivery-item {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.8rem;
  }

  .delivery-item__icon {
    width: 2.2rem;
    height: 2.2rem;
  }

  .delivery-item__action {
    grid-column: 2;
    justify-self: start;
  }

  .delivery-reader {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .delivery-reader__chips {
    grid-column: 2;
    justify-content: flex-start;
  }
}

#section-delivery-logs .player-directory-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.9rem;
}

#section-delivery-logs .player-directory-summary button {
  width: auto;
  min-height: 2.1rem;
  padding: 0.3rem 0.9rem;
  border-radius: 10px;
  font-size: 0.84rem;
}

#section-delivery-logs #delivery-delete-all,
#section-delivery-logs #delivery-apply {
  white-space: nowrap;
}

/* ==========================================================================
   Botón flotante de WhatsApp: bocadillo con el mensaje y opción de esconderlo
   ========================================================================== */
.whatsapp-widget {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  pointer-events: none;
}

.whatsapp-widget[hidden] {
  display: none;
}

.whatsapp-widget > * {
  pointer-events: auto;
}

.whatsapp-widget--left {
  right: auto;
  left: 24px;
  align-items: flex-start;
}

.whatsapp-widget .whatsapp-floating-btn {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
}

.whatsapp-widget__bubble {
  position: relative;
  max-width: min(18rem, calc(100vw - 2.5rem));
  padding: 0.8rem 2rem 0.8rem 0.95rem;
  border: 1px solid #d7f5e2;
  border-radius: 16px 16px 4px 16px;
  background: #ffffff;
  color: #16224f;
  box-shadow: 0 16px 34px -18px rgba(15, 23, 42, 0.45);
  cursor: pointer;
  animation: whatsapp-bubble-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.whatsapp-widget--left .whatsapp-widget__bubble {
  border-radius: 16px 16px 16px 4px;
}

.whatsapp-widget__bubble[hidden] {
  display: none;
}

.whatsapp-widget__bubble-title {
  display: block;
  margin-bottom: 0.2rem;
  color: #128c4b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.whatsapp-widget__bubble-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre-line;
}

.whatsapp-widget__bubble-close {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  display: grid;
  place-items: center;
  width: 1.5rem !important;
  min-width: 0 !important;
  height: 1.5rem;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #8a92ab !important;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.whatsapp-widget__bubble-close:hover {
  background: #f1f4fb !important;
  color: #16224f !important;
}

/* Botón «×» para esconder, en la esquina del icono */
.whatsapp-widget__hide {
  position: absolute;
  right: -4px;
  bottom: 40px;
  display: grid;
  place-items: center;
  width: 22px !important;
  min-width: 0 !important;
  height: 22px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: #4a5578 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.whatsapp-widget--left .whatsapp-widget__hide {
  right: auto;
  left: 38px;
}

.whatsapp-widget__hide:hover {
  background: #16224f !important;
}

/* Pestaña para volver a mostrarlo, pegada al borde */
.whatsapp-show-tab {
  position: fixed;
  right: 0;
  bottom: 110px;
  z-index: 999;
  display: grid;
  place-items: center;
  width: 30px !important;
  min-width: 0 !important;
  height: 44px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px 0 0 12px !important;
  background: #25d366 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: width 0.2s ease;
}

.whatsapp-show-tab:hover {
  width: 38px !important;
}

.whatsapp-show-tab[hidden] {
  display: none;
}

.whatsapp-show-tab--left {
  right: auto;
  left: 0;
  border-radius: 0 12px 12px 0 !important;
}

@keyframes whatsapp-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 600px) {
  .whatsapp-widget {
    right: 16px;
    bottom: 80px;
  }

  .whatsapp-widget--left {
    right: auto;
    left: 16px;
  }

  .whatsapp-widget__hide {
    bottom: 34px;
  }

  .whatsapp-widget--left .whatsapp-widget__hide {
    left: 32px;
  }

  .whatsapp-show-tab {
    bottom: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-widget__bubble {
    animation: none;
  }
}

/* Registro de envíos: filtros en varias filas si no caben */
#section-delivery-logs .player-directory-controls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  align-items: end;
  gap: 0.75rem;
}

#section-delivery-logs .player-directory-controls > label[hidden] {
  display: none;
}

#section-delivery-logs .player-directory-controls__action {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-column: span 2;
}

#section-delivery-logs .player-directory-controls__action > button {
  flex: 1 1 auto;
  width: auto;
}

@media (max-width: 480px) {
  #section-delivery-logs .player-directory-controls__action {
    grid-column: 1 / -1;
  }
}

/* «×» para esconder el WhatsApp: más grande y con contraste sobre cualquier fondo */
.whatsapp-widget__hide {
  top: auto;
  right: -6px;
  bottom: 42px;
  width: 28px !important;
  height: 28px;
  border: 2px solid #ffffff !important;
  background: #16224f !important;
  box-shadow: 0 0 0 2px rgba(22, 34, 79, 0.25), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.whatsapp-widget__hide svg {
  width: 14px;
  height: 14px;
}

.whatsapp-widget--left .whatsapp-widget__hide {
  right: auto;
  left: 36px;
}

@media (max-width: 600px) {
  .whatsapp-widget__hide {
    right: -8px;
    bottom: 36px;
  }

  .whatsapp-widget--left .whatsapp-widget__hide {
    left: 30px;
  }
}

/* La «×» siempre por encima del icono verde */
.whatsapp-widget .whatsapp-floating-btn {
  z-index: 1;
}

.whatsapp-widget__hide {
  z-index: 3;
  bottom: 46px;
}

@media (max-width: 600px) {
  .whatsapp-widget__hide {
    bottom: 40px;
  }
}

/* ================================================================
   Pistas: nuevo diseño (gestión de pistas y reservas privadas)
   ================================================================ */
.court-page .status-message:empty {
  display: none !important;
}

.court-page__intro--actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.court-page__intro-text {
  display: grid;
  gap: 0.35rem;
}

.court-page__cta {
  border-radius: 999px;
  padding: 0.75rem 1.4rem;
  box-shadow: 0 12px 24px -14px rgba(49, 89, 245, 0.8);
}

.court-page__card {
  border-radius: 22px;
}

.court-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.court-stat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 7rem;
  padding: 1rem 1.1rem;
  border-radius: 20px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 30px -20px rgba(22, 34, 79, 0.6);
}

.court-stat::after {
  content: '';
  position: absolute;
  right: -1.6rem;
  bottom: -1.6rem;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.court-stat__label {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.92;
}

.court-stat__value {
  margin-top: auto;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.court-stat__hint {
  font-size: 0.75rem;
  opacity: 0.85;
}

.court-stat--mine {
  background: linear-gradient(150deg, #22306b 0%, #16224f 100%);
}

.court-stat--mine .court-stat__value {
  color: #dcf56b;
}

.court-stat--free {
  color: #2c3a06;
  background: linear-gradient(160deg, #e4f98b 0%, #c6ea5c 100%);
  border-color: rgba(120, 160, 20, 0.25);
}

.court-stat--free::after {
  border-color: rgba(255, 255, 255, 0.35);
}

.court-stat--reserved {
  background: linear-gradient(135deg, #3159f5 0%, #2443d6 100%);
}

.court-stat--match {
  background: linear-gradient(160deg, #5a4be0 0%, #3a35a8 100%);
}

.court-stat--blocked {
  color: #4a2a04;
  background: linear-gradient(160deg, #fcd77f 0%, #f5b041 100%);
  border-color: rgba(200, 130, 20, 0.25);
}

/* Navegación por día */
.court-day-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: 18px;
  background: #f3f5fc;
  border: 1px solid rgba(49, 89, 245, 0.1);
}

.court-day-nav__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(22, 34, 79, 0.12);
  background: #ffffff;
  color: #16224f;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 4px 10px -6px rgba(22, 34, 79, 0.4);
}

.court-day-nav__arrow:hover {
  background: #16224f;
  color: #dcf56b;
}

.court-day-nav__current {
  display: grid;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.court-day-nav__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3b4a8f;
}

.court-day-nav__label {
  font-size: 1.1rem;
  font-weight: 800;
  color: #16224f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.court-day-nav__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.court-day-nav__tools input[type="date"] {
  min-width: 9.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  background: #ffffff;
}

.court-day-nav__tools .secondary {
  border-radius: 999px;
}

/* Leyenda en chips */
.court-page .court-grid-legend {
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.court-page .court-grid-legend__item {
  padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid rgba(22, 34, 79, 0.1);
  color: #33406e;
}

.court-page .court-grid-legend__item::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.court-page .court-grid-legend__item--free::before { background: #8fd14f; border: 0; }
.court-page .court-grid-legend__item--reserved::before { background: #3159f5; border: 0; }
.court-page .court-grid-legend__item--match::before { background: #6d5ce8; border: 0; }
.court-page .court-grid-legend__item--blocked::before { background: #f5b041; border: 0; }
.court-page .court-grid-legend__item--selected::before { background: #ffffff; border: 2px solid #0284c7; }

/* Cuadrícula */
.court-page .court-grid {
  gap: 4px;
}

.court-page .court-grid__corner,
.court-page .court-grid__time-header {
  background: transparent;
  border-right: 0;
  color: #6b77a3;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.court-page .court-grid__corner {
  background: #ffffff;
  text-transform: uppercase;
}

.court-page .court-grid__court-label {
  background: #16224f;
  color: #ffffff;
  border-right: 0;
  border-radius: 12px;
  justify-content: center;
  text-align: center;
  font-size: 0.82rem;
}

.court-page .court-grid__cell {
  border-radius: 12px;
  min-height: 56px;
}

.court-page .court-grid__cell--blocked,
.court-page .court-grid-cell--blocked {
  background: #fff8e6;
  border: 1px solid #fcd77f;
  color: #92400e;
}

.court-page .court-mobile-slot--blocked {
  background: #fff8e6;
  border-color: #fcd77f;
  color: #92400e;
}

.court-page .court-mobile-card {
  border-radius: 18px;
}

.court-page .court-mobile-card__header {
  background: #16224f;
  border-bottom: 0;
}

.court-page .court-mobile-card__name {
  color: #ffffff;
}

.court-page .court-mobile-card__sport {
  background: rgba(220, 245, 107, 0.18);
  color: #dcf56b;
}

.court-page .court-mobile-slot {
  border-radius: 12px;
}

.court-page__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0.65rem 0.9rem;
  border-radius: 14px;
  background: #f3f5fc;
  color: #3b4a8f;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Tarjetas de reservas y bloqueos */
.court-reservation-list,
.court-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.court-reservation-card,
.court-block-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(22, 34, 79, 0.1);
  box-shadow: 0 10px 26px -20px rgba(22, 34, 79, 0.55);
}

.court-reservation-card--pending {
  border-color: rgba(245, 176, 65, 0.6);
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 60%);
}

.court-date-badge {
  display: grid;
  justify-items: center;
  align-content: center;
  width: 4.2rem;
  min-height: 4.6rem;
  padding: 0.4rem 0.25rem;
  border-radius: 16px;
  align-self: start;
  background: #16224f;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.1;
}

.court-date-badge__weekday,
.court-date-badge__month {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.court-date-badge__day {
  font-size: 1.7rem;
  font-weight: 800;
  color: #dcf56b;
}

.court-reservation-card__body,
.court-block-card__body {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.court-reservation-card__head,
.court-block-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.court-reservation-card__title,
.court-block-card__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #16224f;
}

.court-reservation-card__time,
.court-block-card__schedule {
  font-size: 0.9rem;
  font-weight: 600;
  color: #3b4a8f;
}

.court-reservation-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.court-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #eef1fb;
  color: #33406e;
}

.court-chip--confirmed {
  background: #ecf9d0;
  color: #3f5a07;
}

.court-chip--pending {
  background: #fff1d6;
  color: #92400e;
}

.court-chip--recurring {
  background: #ece9ff;
  color: #4c3fc4;
}

.court-chip--block-lesson { background: #e3f2ff; color: #1d5fa8; }
.court-chip--block-league { background: #efe9ff; color: #5b3fd1; }
.court-chip--block-tournament { background: #fff0e3; color: #c2560c; }
.court-chip--block-interclub { background: #e2f6f2; color: #1d6f63; }
.court-chip--block-maintenance,
.court-chip--block-other { background: #fff1d6; color: #92400e; }

.court-reservation-card__players {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.court-reservation-card__player {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem 0.2rem 0.2rem;
  border-radius: 999px;
  background: #f3f5fc;
  font-size: 0.85rem;
  font-weight: 600;
  color: #16224f;
}

.court-reservation-card__player .player-avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
}

.court-reservation-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.court-reservation-card__actions button {
  border-radius: 999px;
}

.court-reservation-list__empty {
  list-style: none;
}

.court-block-card {
  border-left: 6px solid #f5b041;
}

.court-block-card--lesson { border-left-color: #3b8fe0; }
.court-block-card--league { border-left-color: #6d5ce8; }
.court-block-card--tournament { border-left-color: #f08a3c; }
.court-block-card--interclub { border-left-color: #2bb3a0; }

.court-block-card__notes {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

@media (max-width: 768px) {
  .court-day-nav {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .court-day-nav__tools {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .court-day-nav__tools input[type="date"] {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    max-width: none;
  }
  .court-day-nav__tools .secondary {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-inline: 1.2rem;
  }
  .court-page__intro--actions {
    align-items: stretch;
  }
  .court-page__cta {
    width: 100%;
  }
  .court-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .court-stat--mine {
    grid-column: 1 / -1;
  }
  .court-reservation-card,
  .court-block-card {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .court-date-badge {
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: 0.4rem;
    width: auto;
    min-height: 0;
    padding: 0.4rem 0.8rem;
    justify-self: start;
    border-radius: 999px;
  }
  .court-date-badge__day {
    font-size: 1.05rem;
  }
  .court-reservation-card__actions {
    justify-content: stretch;
  }
  .court-reservation-card__actions button {
    flex: 1;
  }
}

/* ================================================================
   Pistas: formulario de bloqueos con el nuevo diseño
   ================================================================ */
.court-page .court-block-form {
  gap: 1rem;
}

.court-block-step {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid rgba(22, 34, 79, 0.08);
  border-radius: 20px;
  background: #f6f8fd;
  min-width: 0;
}

.court-block-step__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  float: left;
  width: 100%;
  margin-bottom: 0.1rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #16224f;
}

.court-block-step__title + * {
  clear: both;
}

.court-block-step__title small {
  font-weight: 500;
  color: #6b77a3;
}

.court-block-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #16224f;
  color: #dcf56b;
  font-size: 0.85rem;
  font-weight: 800;
}

.court-page .court-block-form__field label {
  color: #3b4a8f;
  font-size: 0.82rem;
}

.court-page .court-block-form__field select,
.court-page .court-block-form__field input,
.court-page .court-block-form__field textarea {
  border-radius: 12px;
  border-color: rgba(22, 34, 79, 0.14);
  padding: 0.6rem 0.8rem;
}

.court-page .court-block-form__row {
  margin-top: 0;
}

/* Tipo de bloqueo */
.court-block-type-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.6rem;
}

.court-block-type {
  --block-color: #f5b041;
  --block-soft: #fff4dc;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0.9rem;
  border-radius: 16px;
  border: 2px solid transparent;
  background: #ffffff;
  color: #16224f;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: left;
  box-shadow: 0 6px 16px -14px rgba(22, 34, 79, 0.6);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.court-block-type:hover {
  border-color: var(--block-soft);
}

.court-block-type:active {
  transform: scale(0.98);
}

.court-block-type__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--block-soft);
  font-size: 1rem;
}

.court-block-type.is-active {
  border-color: var(--block-color);
  background: var(--block-soft);
}

.court-block-type.is-active .court-block-type__icon {
  background: var(--block-color);
}

.court-block-type--lesson { --block-color: #3b8fe0; --block-soft: #e3f2ff; }
.court-block-type--league { --block-color: #6d5ce8; --block-soft: #efe9ff; }
.court-block-type--tournament { --block-color: #f08a3c; --block-soft: #fff0e3; }
.court-block-type--interclub { --block-color: #2bb3a0; --block-soft: #e2f6f2; }
.court-block-type--maintenance { --block-color: #f5b041; --block-soft: #fff4dc; }

/* Pistas */
.court-block-court-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.court-block-court,
.court-page .day-toggles .toggle-button,
.court-page .timeslots-toggles .toggle-button {
  min-width: 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(22, 34, 79, 0.14);
  background: #ffffff;
  color: #16224f;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.court-block-court:hover,
.court-page .day-toggles .toggle-button:hover,
.court-page .timeslots-toggles .toggle-button:hover {
  border-color: #16224f;
  background: #ffffff;
}

.court-block-court.is-active,
.court-page .day-toggles .toggle-button.active,
.court-page .timeslots-toggles .toggle-button.active {
  background: #16224f;
  border-color: #16224f;
  color: #dcf56b;
}

.court-page .timeslots-toggles {
  max-height: none;
}

/* Interruptor de recurrencia */
.court-block-switch {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(22, 34, 79, 0.08);
  cursor: pointer;
}

.court-block-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.court-block-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #cfd5ea;
  transition: background 0.2s ease;
}

.court-block-switch__track::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(22, 34, 79, 0.3);
  transition: transform 0.2s ease;
}

.court-block-switch input:checked + .court-block-switch__track {
  background: #16224f;
}

.court-block-switch input:checked + .court-block-switch__track::after {
  transform: translateX(1.2rem);
  background: #dcf56b;
}

.court-block-switch input:focus-visible + .court-block-switch__track {
  outline: 3px solid rgba(49, 89, 245, 0.35);
  outline-offset: 2px;
}

.court-block-switch__text {
  display: grid;
  gap: 0.1rem;
  font-size: 0.82rem;
  color: #6b77a3;
}

.court-block-switch__text strong {
  font-size: 0.95rem;
  color: #16224f;
}

.court-block-recurring {
  display: grid;
  gap: 0.9rem;
}

/* Resumen */
.court-block-preview {
  --block-color: #f5b041;
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 18px;
  background: #16224f;
  color: #ffffff;
  border-left: 6px solid var(--block-color);
}

.court-block-preview--lesson { --block-color: #3b8fe0; }
.court-block-preview--league { --block-color: #6d5ce8; }
.court-block-preview--tournament { --block-color: #f08a3c; }
.court-block-preview--interclub { --block-color: #2bb3a0; }

.court-block-preview__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #dcf56b;
}

.court-block-preview__title {
  font-size: 1.02rem;
}

.court-block-preview__detail {
  font-size: 0.88rem;
  opacity: 0.85;
}

.court-page .court-block-form__submit {
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  box-shadow: 0 12px 24px -14px rgba(49, 89, 245, 0.8);
}

/* Barra de selección de la cuadrícula */
.court-page .court-admin-selection-bar {
  border-radius: 18px;
  background: #16224f;
  border: 0;
  color: #ffffff;
}

.court-page .court-admin-selection-bar .ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
}

.court-page .court-admin-selection-bar button {
  border-radius: 999px;
}

@media (max-width: 640px) {
  .court-block-step {
    padding: 1rem 0.85rem;
  }
  .court-block-type-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .court-block-type {
    padding: 0.6rem 0.65rem;
    font-size: 0.85rem;
  }
}

/* ================================================================
   Club: nuevo diseño de «Información del club»
   ================================================================ */
.club-page .status-message:empty {
  display: none !important;
}

.club-page__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.club-page__intro-text {
  display: grid;
  gap: 0.35rem;
}

.club-page__edit {
  border-radius: 999px;
  padding: 0.75rem 1.4rem;
  box-shadow: 0 12px 24px -14px rgba(49, 89, 245, 0.8);
}

.club-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.1rem;
  margin-bottom: 1rem;
  padding: 1.6rem;
  border-radius: 26px;
  color: #ffffff;
  background:
    radial-gradient(circle at 100% 0%, rgba(49, 89, 245, 0.45), transparent 50%),
    linear-gradient(140deg, #22306b 0%, #16224f 100%);
  box-shadow: 0 20px 40px -28px rgba(22, 34, 79, 0.9);
}

.club-hero::after {
  content: '';
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  border: 18px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.club-hero__identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.club-page .club-hero__logo {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  background-color: #ffffff;
  background-size: contain;
  background-repeat: no-repeat;
  border: 4px solid #ffffff;
  color: #16224f;
  font-size: 2rem;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.5);
}

.club-hero__text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.club-hero__name {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.club-hero__slogan {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #dcf56b;
}

.club-hero__description {
  margin: 0;
  max-width: 60ch;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.club-hero__description:empty {
  display: none;
}

.club-hero__contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem;
  margin: 0;
}

.club-hero__contact-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-width: 0;
}

.club-hero__contact-item dt {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.club-hero__contact-item dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  margin: 0;
  font-weight: 700;
  color: #ffffff;
  overflow-wrap: anywhere;
}

.club-hero__contact-item a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: rgba(220, 245, 107, 0.6);
  text-underline-offset: 3px;
}

.club-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.club-stat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 6.5rem;
  padding: 1rem 1.1rem;
  border-radius: 20px;
  color: #ffffff;
  box-shadow: 0 14px 30px -20px rgba(22, 34, 79, 0.6);
}

.club-stat::after {
  content: '';
  position: absolute;
  right: -1.6rem;
  bottom: -1.6rem;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.16);
}

.club-stat__label {
  font-size: 0.85rem;
  font-weight: 600;
}

.club-stat__value {
  margin-top: auto;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.club-stat__hint {
  font-size: 0.75rem;
  opacity: 0.85;
}

.club-stat--courts {
  background: linear-gradient(135deg, #3159f5 0%, #2443d6 100%);
}

.club-stat--lights {
  color: #2c3a06;
  background: linear-gradient(160deg, #e4f98b 0%, #c6ea5c 100%);
}

.club-stat--facilities {
  background: linear-gradient(160deg, #3e7377 0%, #2b5059 100%);
}

.club-page__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.club-panel {
  border-radius: 22px;
  margin: 0;
}

.club-panel--courts {
  grid-column: 1 / -1;
}

.club-court-list,
.club-schedule-list,
.club-facility-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.club-court-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.club-court {
  --court-color: #2f8f5b;
  --court-soft: #e6f6ec;
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(22, 34, 79, 0.1);
  border-top: 6px solid var(--court-color);
  box-shadow: 0 10px 24px -20px rgba(22, 34, 79, 0.6);
}

.club-court--padel {
  --court-color: #3159f5;
  --court-soft: #e8edff;
}

.club-court__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.club-court__name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #16224f;
}

.club-court__sport {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--court-soft);
  color: var(--court-color);
}

.club-court__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.club-court__chip {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #f1f3fa;
  color: #33406e;
}

.club-court__chip--on {
  background: #f5fbd9;
  color: #4a5f08;
}

.club-court__chip--off {
  color: #8a93b5;
}

.club-court__notes {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

.club-schedule-list {
  display: grid;
  gap: 0.5rem;
}

.club-schedule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: #f6f8fd;
}

.club-schedule__label {
  font-weight: 700;
  color: #16224f;
}

.club-schedule__time {
  flex-shrink: 0;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #16224f;
  color: #dcf56b;
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.club-facility-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.club-facility {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: #f6f8fd;
  border: 1px solid rgba(22, 34, 79, 0.08);
  font-size: 0.9rem;
  font-weight: 600;
  color: #16224f;
}

.club-facility::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #c6ea5c;
  color: #2c3a06;
  font-size: 0.7rem;
  font-weight: 900;
}

@media (max-width: 768px) {
  .club-page__intro {
    align-items: stretch;
  }
  .club-page__edit {
    width: 100%;
  }
  .club-hero {
    padding: 1.25rem;
  }
  .club-page .club-hero__logo {
    width: 68px;
    height: 68px;
  }
  .club-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .club-stat--courts {
    grid-column: 1 / -1;
  }
  .club-page__grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Reservas: formulario de reserva / completar reserva (nuevo diseño)
   ================================================================ */
.reservation-form {
  display: grid;
  gap: 0.85rem;
}

.reservation-form .status-message:empty {
  display: none !important;
}

.reservation-summary {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border-radius: 18px;
  background: linear-gradient(140deg, #22306b 0%, #16224f 100%);
  color: #ffffff;
}

.reservation-summary__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #dcf56b;
}

.reservation-summary__text {
  font-size: 1rem;
  font-weight: 800;
}

.reservation-step {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 18px;
  background: #f6f8fd;
  border: 1px solid rgba(22, 34, 79, 0.06);
  min-width: 0;
}

.reservation-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.reservation-step__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: #16224f;
}

.reservation-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: #16224f;
  color: #dcf56b;
  font-size: 0.78rem;
}

.reservation-step__aside {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(22, 34, 79, 0.1);
  font-size: 0.78rem;
  font-weight: 800;
  color: #3b4a8f;
}

.reservation-step__body {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.reservation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.reservation-chips--days {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scrollbar-width: none;
}

.reservation-chips--days::-webkit-scrollbar {
  display: none;
}

.reservation-chips--times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}

.reservation-chips__empty {
  margin: 0;
  font-size: 0.88rem;
  color: #6b77a3;
}

.reservation-chip {
  min-width: 0;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(22, 34, 79, 0.14);
  background: #ffffff;
  color: #16224f;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.reservation-chip:hover:not(:disabled) {
  border-color: #16224f;
}

.reservation-chip.is-active {
  background: #16224f;
  border-color: #16224f;
  color: #dcf56b;
}

.reservation-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.reservation-chip--day {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  min-width: 5.6rem;
  padding: 0.5rem 0.8rem;
  border-radius: 16px;
}

.reservation-chip__eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b77a3;
}

.reservation-chip--day.is-active .reservation-chip__eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.reservation-chip--day strong {
  font-size: 0.92rem;
  white-space: nowrap;
}

.reservation-form__other-date {
  font-size: 0.82rem;
  color: #3b4a8f;
}

/* Formato: control segmentado */
.reservation-form .reservation-game-type-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.reservation-form .reservation-game-type-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  border: 2px solid rgba(22, 34, 79, 0.12);
  background: #ffffff;
  cursor: pointer;
  text-align: center;
}

.reservation-form .reservation-game-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reservation-game-type-option__text {
  display: grid;
  gap: 0.05rem;
}

.reservation-game-type-option__text strong {
  font-size: 0.95rem;
  color: #16224f;
}

.reservation-game-type-option__text span {
  font-size: 0.75rem;
  color: #6b77a3;
}

.reservation-form .reservation-game-type-option:has(input:checked) {
  border-color: #16224f;
  background: #16224f;
}

.reservation-form .reservation-game-type-option:has(input:checked) strong {
  color: #dcf56b;
}

.reservation-form .reservation-game-type-option:has(input:checked) span {
  color: rgba(255, 255, 255, 0.75);
}

.reservation-form .reservation-game-type-option:has(input:focus-visible) {
  outline: 3px solid rgba(49, 89, 245, 0.35);
  outline-offset: 2px;
}

/* Plazas de jugadores */
.reservation-form .reservation-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 0;
}

@media (max-width: 520px) {
  .reservation-form .reservation-slots {
    grid-template-columns: 1fr;
  }
}

.reservation-slot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(22, 34, 79, 0.1);
}

.reservation-slot:not(.is-filled) {
  border: 2px dashed rgba(22, 34, 79, 0.16);
  background: transparent;
  color: #8a93b5;
}

.reservation-slot.is-owner {
  background: #eef1fb;
}

.reservation-slot .player-avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.reservation-slot__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(22, 34, 79, 0.06);
  font-weight: 800;
}

.reservation-slot__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 700;
}

.reservation-slot.is-filled .reservation-slot__name {
  color: #16224f;
}

.reservation-slot__remove {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: #fde8e4;
  color: #c2410c;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.reservation-form .reservation-participant-search {
  display: grid;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3b4a8f;
}

.reservation-form .reservation-participant-search input {
  border-radius: 14px;
  padding: 0.65rem 0.9rem;
  background: #ffffff;
}

.reservation-form .reservation-participant-results {
  border-radius: 14px;
  overflow: hidden;
  z-index: 5;
}

.reservation-form-note {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: #fff7e6;
  color: #7a4b05;
  font-size: 0.8rem;
  line-height: 1.4;
}

.reservation-form .reservation-form__notes {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3b4a8f;
}

.reservation-form .reservation-form__notes textarea {
  border-radius: 14px;
  min-height: 0;
}

.reservation-form .form-actions button {
  border-radius: 999px;
}

/* ================================================================
   Integraciones (Odoo, correo y reCAPTCHA)
   ================================================================ */
.integrations-page .status-message:empty {
  display: none !important;
}

.integration-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.integration-card {
  --integration-color: #3159f5;
  --integration-soft: #e8edff;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 0.6rem 0.7rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border-radius: 20px;
  border: 2px solid transparent;
  background: #ffffff;
  color: #16224f;
  text-align: left;
  box-shadow: 0 12px 28px -22px rgba(22, 34, 79, 0.7);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.integration-card:hover {
  border-color: var(--integration-soft);
}

.integration-card:active {
  transform: scale(0.99);
}

.integration-card.is-active {
  border-color: var(--integration-color);
}

.integration-card--odoo { --integration-color: #714b67; --integration-soft: #f1e8ef; }
.integration-card--email { --integration-color: #3159f5; --integration-soft: #e8edff; }
.integration-card--recaptcha { --integration-color: #2f8f5b; --integration-soft: #e6f6ec; }
.integration-card--push { --integration-color: #d97706; --integration-soft: #fff1d6; }
.integration-card--whatsapp { --integration-color: #25d366; --integration-soft: #e3f9ec; }

.integration-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 14px;
  background: var(--integration-soft);
  font-size: 1.3rem;
}

.integration-card__body {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.integration-card__name {
  font-size: 1.05rem;
  font-weight: 800;
}

.integration-card__desc {
  font-size: 0.82rem;
  color: #6b77a3;
}

.integration-card__detail {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #33406e;
  overflow-wrap: anywhere;
}

.integration-card__detail:empty {
  display: none;
}

.integration-status {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  background: #eef1fb;
  color: #6b77a3;
}

.integration-status::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.integration-status--active {
  background: #ecf9d0;
  color: #3f5a07;
}

.integration-status--inactive {
  background: #fff1d6;
  color: #92400e;
}

.integration-status--pending,
.integration-status--error {
  background: #eef1fb;
  color: #6b77a3;
}

.integration-panel > .card {
  border-radius: 22px;
}

.integration-panel .form-actions button {
  border-radius: 999px;
}

@media (max-width: 900px) {
  .integration-cards {
    grid-template-columns: 1fr;
  }
  .integration-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
  }
  .integration-status {
    grid-column: auto;
    justify-self: end;
  }
}

.integration-panel #smtp-config-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
  align-items: start;
}

.integration-panel #smtp-config-form > .checkbox-option,
.integration-panel #smtp-config-form > .status-message,
.integration-panel #smtp-config-form > .form-actions,
.integration-panel #smtp-config-form > .form-hint {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .integration-panel #smtp-config-form {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Plantillas de correo
   ================================================================ */
.email-templates-page .status-message:empty {
  display: none !important;
}

.email-template-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.email-template-stat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 6.5rem;
  padding: 1rem 1.1rem;
  border-radius: 20px;
  color: #ffffff;
  box-shadow: 0 14px 30px -20px rgba(22, 34, 79, 0.6);
}

.email-template-stat::after {
  content: '';
  position: absolute;
  right: -1.6rem;
  bottom: -1.6rem;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.16);
}

.email-template-stat__label { font-size: 0.85rem; font-weight: 600; }
.email-template-stat__value { margin-top: auto; font-size: 2.1rem; font-weight: 800; line-height: 1; }
.email-template-stat__hint { font-size: 0.75rem; opacity: 0.85; }

.email-template-stat--used { color: #2c3a06; background: linear-gradient(160deg, #e4f98b 0%, #c6ea5c 100%); }
.email-template-stat--unused { background: linear-gradient(150deg, #6b7591 0%, #4b5573 100%); }
.email-template-stat--custom { background: linear-gradient(135deg, #3159f5 0%, #2443d6 100%); }
.email-template-stat--off { color: #4a2a04; background: linear-gradient(160deg, #fcd77f 0%, #f5b041 100%); }

.email-template-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  padding: 0.5rem;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 26px -22px rgba(22, 34, 79, 0.6);
}

.email-template-filter {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: #f1f3fa;
}

.email-template-filter__chip {
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #33406e;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}

.email-template-filter__chip.is-active {
  background: #16224f;
  color: #dcf56b;
}

.email-template-toolbar__field select,
.email-template-toolbar__field input {
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
}

.email-template-toolbar__search {
  flex: 1;
  min-width: 200px;
}

.email-template-toolbar__search input {
  width: 100%;
}

.email-template-groups {
  display: grid;
  gap: 1.4rem;
}

.email-template-group__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3b4a8f;
}

.email-template-group__count {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #e8edff;
  color: #3159f5;
  font-size: 0.72rem;
  letter-spacing: 0;
}

.email-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.85rem;
}

.email-template-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(22, 34, 79, 0.08);
  border-left: 6px solid #c5cbe0;
  box-shadow: 0 10px 26px -22px rgba(22, 34, 79, 0.6);
}

.email-template-card.is-used { border-left-color: #8fd14f; }
.email-template-card.is-off { border-left-color: #f5b041; opacity: 0.85; }

.email-template-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem 0.6rem;
}

.email-template-card__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #16224f;
}

.email-template-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.email-template-chip {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.email-template-chip--used { background: #ecf9d0; color: #3f5a07; }
.email-template-chip--unused { background: #eef1fb; color: #6b77a3; }
.email-template-chip--off { background: #fff1d6; color: #92400e; }
.email-template-chip--custom { background: #e8edff; color: #2443d6; }

.email-template-card__subject {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  background: #f6f8fd;
  color: #33406e;
  font-size: 0.86rem;
  font-weight: 600;
}

.email-template-card__usage {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #3b4a8f;
}

.email-template-card__usage strong { color: #16224f; }
.email-template-card__usage.is-muted { color: #8a93b5; }

.email-template-card__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.2rem;
}

.email-template-card__actions button {
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
}

/* Editor */
.modal.modal--email-template {
  width: min(1180px, 96vw);
  max-width: min(1180px, 96vw);
}

.email-template-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.2rem;
  align-items: start;
}

.email-template-editor__form {
  display: grid;
  gap: 0.9rem;
}

.email-template-editor__form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.5;
}

.email-template-editor__usage {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: #ecf9d0;
  color: #3f5a07;
  font-size: 0.85rem;
}

.email-template-editor__usage strong {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.email-template-editor__usage.is-unused {
  background: #eef1fb;
  color: #4b5573;
}

.email-template-editor__vars {
  display: grid;
  gap: 0.4rem;
}

.email-template-editor__vars-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3b4a8f;
}

.email-template-editor__var-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.email-template-var {
  min-width: 0;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(49, 89, 245, 0.25);
  background: #f3f6ff;
  color: #2443d6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  cursor: pointer;
}

.email-template-var:hover {
  background: #2443d6;
  color: #ffffff;
}

.email-template-switch {
  display: flex !important;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 16px;
  background: #f6f8fd;
  cursor: pointer;
}

.email-template-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.email-template-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #cfd5ea;
  transition: background 0.2s ease;
}

.email-template-switch__track::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(22, 34, 79, 0.3);
  transition: transform 0.2s ease;
}

.email-template-switch input:checked + .email-template-switch__track { background: #16224f; }
.email-template-switch input:checked + .email-template-switch__track::after { transform: translateX(1.2rem); background: #dcf56b; }
.email-template-switch input:focus-visible + .email-template-switch__track { outline: 3px solid rgba(49, 89, 245, 0.35); outline-offset: 2px; }

.email-template-switch__text {
  display: grid;
  font-size: 0.8rem;
  color: #6b77a3;
}

.email-template-switch__text strong {
  font-size: 0.92rem;
  color: #16224f;
}

.email-template-editor__advanced summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: #3b4a8f;
}

.email-template-editor__advanced[open] summary {
  margin-bottom: 0.6rem;
}

.email-template-editor__actions {
  flex-wrap: wrap;
}

.email-template-editor__actions button {
  border-radius: 999px;
}

.email-template-editor__actions [data-action="reset"] {
  margin-right: auto;
}

.email-template-editor__preview {
  position: sticky;
  top: 0;
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border-radius: 20px;
  background: #eef1f8;
}

.email-template-editor__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3b4a8f;
}

.email-template-editor__preview-tabs {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: #ffffff;
}

.email-template-editor__preview-tabs button {
  min-width: 0;
  padding: 0.3rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #33406e;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.email-template-editor__preview-tabs button.is-active {
  background: #16224f;
  color: #dcf56b;
}

.email-template-editor__preview-subject {
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  background: #ffffff;
  color: #16224f;
  font-size: 0.88rem;
  font-weight: 700;
}

.email-template-editor__frame {
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: 14px;
  background: #eef1f8;
}

.email-template-editor__text {
  margin: 0;
  max-height: 560px;
  overflow: auto;
  padding: 0.9rem;
  border-radius: 14px;
  background: #ffffff;
  white-space: pre-wrap;
  font-size: 0.82rem;
  color: #24324f;
}

.email-template-editor__preview-note {
  margin: 0;
  font-size: 0.75rem;
  color: #6b77a3;
}

@media (max-width: 900px) {
  .email-template-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .email-template-editor {
    grid-template-columns: 1fr;
  }
  .email-template-editor__preview {
    position: static;
  }
  .email-template-editor__frame {
    height: 480px;
  }
}

@media (max-width: 600px) {
  .email-template-toolbar {
    border-radius: 18px;
  }
  .email-template-filter {
    width: 100%;
  }
  .email-template-filter__chip {
    flex: 1;
  }
  .email-template-toolbar__field,
  .email-template-toolbar__field select {
    width: 100%;
  }
  .email-template-grid {
    grid-template-columns: 1fr;
  }
}
/* ================================================================
   Popup de contacto por teléfono
   ================================================================ */
.phone-consent {
  display: grid;
  gap: 1rem;
  max-width: 440px;
  margin: 0 auto;
}

.phone-consent .status-message:empty {
  display: none !important;
}

.phone-consent__hero {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
}

.phone-consent__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 0.35rem;
  border-radius: 24px;
  background: linear-gradient(140deg, #22306b 0%, #16224f 100%);
  box-shadow: 0 14px 28px -16px rgba(22, 34, 79, 0.8);
  font-size: 2.1rem;
}

.phone-consent__icon-badge {
  position: absolute;
  right: -0.45rem;
  bottom: -0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #25d366;
  border: 3px solid #ffffff;
  font-size: 0.95rem;
}

.phone-consent__eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3b4a8f;
}

.phone-consent__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  color: #16224f;
}

.phone-consent__lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4b5573;
}

.phone-consent__preview {
  display: grid;
  gap: 0.4rem;
  padding: 0.85rem;
  border-radius: 18px;
  background: #f3f5fc;
}

.phone-consent__preview-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b77a3;
}

.phone-consent__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem 0.75rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 22px -18px rgba(22, 34, 79, 0.7);
}

.phone-consent__who {
  display: grid;
  min-width: 0;
}

.phone-consent__name {
  color: #16224f;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-consent__phone {
  color: #3b4a8f;
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.phone-consent__actions-preview {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.4rem;
}

.phone-consent__chip {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
}

.phone-consent__chip--call {
  background: #e8edff;
  color: #2443d6;
}

.phone-consent__chip--wa {
  background: #25d366;
  color: #ffffff;
}

.phone-consent__benefits {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phone-consent__benefits li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #24324f;
}

.phone-consent__benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #c6ea5c;
  color: #2c3a06;
  font-size: 0.75rem;
  font-weight: 900;
}

.phone-consent__phone-field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #3b4a8f;
}

.phone-consent__phone-field input {
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
}

.phone-consent__buttons {
  display: grid;
  gap: 0.5rem;
}

.phone-consent__buttons .primary,
.phone-consent__buttons .secondary {
  width: 100%;
  border-radius: 999px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
}

.phone-consent__buttons .primary {
  box-shadow: 0 12px 24px -14px rgba(49, 89, 245, 0.8);
}

.phone-consent__dismiss {
  justify-self: center;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  border: 0;
  background: transparent;
  color: #6b77a3;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.phone-consent__dismiss:hover {
  color: #b42318;
}

/* ================================================================
   Menú principal de escritorio: pasa a dos filas en lugar de montarse
   sobre los iconos de la derecha cuando no cabe.
   ================================================================ */
@media (min-width: 1025px) {
  .main-menu__list {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
}

/* ================================================================
   Parámetros (antes «Sistema»): identidad de la app y mantenimiento
   ================================================================ */
.params-page {
  display: grid;
  gap: 1rem;
}

.params-page .status-message:empty {
  display: none !important;
}

.params-card {
  border-radius: 22px;
  margin: 0;
}

.params-card .card-header {
  align-items: flex-start;
}

.params-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.params-identity {
  display: grid;
  gap: 1.1rem;
}

.params-logo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #16224f 0%, #2443d6 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.params-logo::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 22px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.params-logo__preview {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background-color: #ffffff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 4px solid #ffffff;
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6b7591;
  font-size: 0.75rem;
  font-weight: 700;
}

.params-logo__preview.is-empty {
  background-color: rgba(255, 255, 255, 0.92);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.6);
}

.params-logo__body {
  display: grid;
  gap: 0.35rem;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.params-logo__title {
  font-size: 1.05rem;
}

.params-logo .params-hint {
  color: rgba(255, 255, 255, 0.78);
}

.params-logo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.params-logo__upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: #dcf56b;
  color: #16224f;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
}

.params-logo__upload:hover {
  background: #c6ea5c;
}

.params-logo__actions .ghost {
  border-radius: 999px;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
}

.params-field {
  display: grid;
  gap: 0.4rem;
}

.params-field__label {
  font-weight: 700;
  color: #16224f;
}

.params-hint {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7591;
  line-height: 1.45;
}

.params-actions {
  display: flex;
  justify-content: flex-end;
}

.params-actions .primary {
  border-radius: 999px;
}

.params-tools {
  display: grid;
  gap: 0.6rem;
}

.params-tool {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  border: 1px solid #e3e8f2;
  background: #f6f8fc;
  color: #16224f;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.params-tool:hover {
  border-color: #3554f0;
  background: #eef2ff;
  transform: translateY(-1px);
}

.params-tool--strong {
  background: #16224f;
  border-color: #16224f;
  color: #ffffff;
}

.params-tool--strong:hover {
  background: #1f2e66;
  border-color: #1f2e66;
}

.params-tool__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #ffffff;
  font-size: 1.2rem;
}

.params-tool--strong .params-tool__icon {
  background: rgba(255, 255, 255, 0.14);
}

.params-tool__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.params-tool__text span {
  font-size: 0.85rem;
  opacity: 0.75;
}

.params-list {
  margin: 0;
  display: grid;
}

.params-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #e3e8f2;
}

.params-row:last-child {
  border-bottom: none;
}

.params-row dt {
  color: #6b7591;
  font-size: 0.9rem;
}

.params-row dd {
  margin: 0;
  text-align: right;
}

.params-value {
  font-weight: 700;
  color: #16224f;
}

.params-value--ok {
  color: #15803d;
}

.params-value--warning {
  color: #b45309;
}

.params-value--error {
  color: #b91c1c;
}

.params-pill {
  flex-shrink: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  background: #eef1f8;
  color: #6b7591;
  white-space: nowrap;
}

.params-pill--ok {
  background: #dcf56b;
  color: #16224f;
}

.params-pill--warning {
  background: #fef3c7;
  color: #92400e;
}

.params-pill--error {
  background: #fee2e2;
  color: #b91c1c;
}

@media (max-width: 1100px) {
  .params-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .params-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .params-logo {
    flex-direction: column;
    align-items: flex-start;
  }

  .params-actions .primary {
    width: 100%;
  }
}

/* ================================================================
   Copias de seguridad: estado, programación, copias y restaurar
   ================================================================ */
.backup-page {
  display: grid;
  gap: 1rem;
}

.backup-page .status-message:empty {
  display: none !important;
}

.backup-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.4rem 1.5rem;
  border-radius: 24px;
  background: linear-gradient(135deg, #16224f 0%, #2443d6 100%);
  color: #ffffff;
}

.backup-hero.is-error {
  background: linear-gradient(135deg, #4a1020 0%, #b91c1c 100%);
}

.backup-hero::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -80px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 26px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.backup-hero__main {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.backup-hero__label {
  color: #dcf56b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.backup-hero__title {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 900;
  line-height: 1.2;
}

.backup-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.backup-hero .backup-chip {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.backup-hero .backup-chip--ok {
  background: #dcf56b;
  color: #16224f;
}

.backup-hero .backup-chip--error {
  background: #ffffff;
  color: #b91c1c;
}

.backup-hero .backup-chip--warning {
  background: #fef3c7;
  color: #92400e;
}

.backup-hero__next {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
}

.backup-hero__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.backup-hero__button {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.backup-hero__button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.backup-hero__button--primary {
  background: #dcf56b;
  border-color: #dcf56b;
  color: #16224f;
}

.backup-hero__button--primary:hover:not(:disabled) {
  background: #c6ea5c;
}

.backup-hero__button:disabled {
  opacity: 0.55;
  cursor: progress;
}

.backup-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.backup-stat {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.15rem;
  border-radius: 20px;
  color: #ffffff;
}

.backup-stat::after {
  content: '';
  position: absolute;
  right: -28px;
  bottom: -38px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 16px solid rgba(255, 255, 255, 0.14);
}

.backup-stat--data { background: linear-gradient(135deg, #3159f5, #2443d6); }
.backup-stat--docs { background: linear-gradient(135deg, #5b3fd6, #4330b8); }
.backup-stat--copies { background: linear-gradient(135deg, #dcf56b, #c6ea5c); color: #16224f; }

.backup-stat__label {
  font-size: 0.85rem;
  font-weight: 800;
}

.backup-stat__value {
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
}

.backup-stat__hint {
  font-size: 0.82rem;
  opacity: 0.85;
}

.backup-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1rem;
  align-items: start;
}

.backup-card {
  border-radius: 22px;
  margin: 0;
}

.backup-card .card-header {
  align-items: flex-start;
}

.backup-card__tools {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.backup-card__tools .ghost {
  border-radius: 999px;
}

.backup-form {
  display: grid;
  gap: 1rem;
}

.backup-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.backup-field {
  display: grid;
  gap: 0.35rem;
}

.backup-field > span:first-child {
  color: #16224f;
  font-weight: 800;
  font-size: 0.9rem;
}

.backup-field small {
  color: #6b7591;
  font-size: 0.8rem;
}

.backup-field input:disabled,
.backup-field select:disabled {
  opacity: 0.5;
}



.backup-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: #f6f8fc;
  border: 1px solid #e3e8f2;
  cursor: pointer;
}

.backup-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.backup-switch__track {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 26px;
  margin-top: 2px;
  border-radius: 999px;
  background: #cbd2e1;
  transition: background-color 0.2s ease;
}

.backup-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(22, 34, 79, 0.25);
  transition: transform 0.2s ease;
}

.backup-switch input:checked + .backup-switch__track {
  background: #3554f0;
}

.backup-switch input:checked + .backup-switch__track::after {
  transform: translateX(18px);
}

.backup-switch input:focus-visible + .backup-switch__track {
  outline: 3px solid rgba(53, 84, 240, 0.35);
  outline-offset: 2px;
}

.backup-switch input:disabled + .backup-switch__track {
  opacity: 0.5;
}

.backup-switch__text {
  display: grid;
  gap: 0.15rem;
}

.backup-switch__text strong {
  color: #16224f;
}

.backup-switch__text span {
  color: #6b7591;
  font-size: 0.85rem;
}



.backup-form__actions {
  display: flex;
  justify-content: flex-end;
}

.backup-form__actions .primary {
  border-radius: 999px;
}

.backup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  max-height: 560px;
  overflow-y: auto;
}

.backup-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 18px;
  border: 1px solid #e3e8f2;
  background: #ffffff;
}

.backup-item--warning {
  background: #fffaf0;
  border-color: #f5dfae;
}

.backup-item--error {
  background: #fff7f7;
  border-color: #fecaca;
}

.backup-item__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #eef1f8;
  font-size: 1.2rem;
}

.backup-item__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.backup-item__title {
  color: #16224f;
}

.backup-item__meta {
  color: #6b7591;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.backup-item__error {
  color: #b91c1c;
  font-size: 0.8rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.backup-item__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  flex-shrink: 0;
}






.backup-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: #eef1f8;
  color: #16224f;
  font-size: 0.75rem;
  font-weight: 800;
}

.backup-chip--ok {
  background: #ecfccb;
  color: #3f6212;
}

.backup-chip--warning {
  background: #fef3c7;
  color: #92400e;
}

.backup-chip--error {
  background: #fee2e2;
  color: #b91c1c;
}

.backup-chip--info {
  background: #e0e7ff;
  color: #2443d6;
}

.backup-empty {
  margin: 0;
  padding: 1.5rem;
  border-radius: 18px;
  background: #f6f8fc;
  color: #6b7591;
  text-align: center;
}

.backup-card--danger {
  border: 1px solid #fecaca;
}

.backup-pill {
  flex-shrink: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.backup-pill--danger {
  background: #fee2e2;
  color: #b91c1c;
}

.backup-drop {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px dashed #c3cce0;
  border-radius: 18px;
  background: #f6f8fc;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.backup-drop:hover,
.backup-drop.is-dragging {
  border-color: #3554f0;
  background: #eef2ff;
}

.backup-drop.has-file {
  border-style: solid;
  border-color: #c6ea5c;
  background: #f7fde0;
}

.backup-drop__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #16224f;
  color: #dcf56b;
  font-size: 1.2rem;
  font-weight: 900;
}

.backup-drop__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.backup-drop__text strong {
  color: #16224f;
  overflow-wrap: anywhere;
}

.backup-drop__text span {
  color: #6b7591;
  font-size: 0.85rem;
}

.backup-note {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  background: #f2fbe0;
  color: #34420d;
  font-size: 0.9rem;
}

.backup-danger-button {
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.4rem;
  background: #dc2626;
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.backup-danger-button:hover:not(:disabled) {
  background: #b91c1c;
}

.backup-danger-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .backup-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .backup-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .backup-stat__value {
    font-size: 1.6rem;
  }

  .backup-hero__actions,
  .backup-hero__button {
    width: 100%;
  }

  .backup-item {
    flex-wrap: wrap;
  }

  .backup-item__tags {
    width: 100%;
    justify-content: flex-start;
    padding-left: calc(42px + 0.85rem);
  }

  .backup-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .backup-card .card-header {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .backup-form__actions .primary,
  .backup-danger-button {
    width: 100%;
  }
}

/* ================================================================
   Mi cuenta: cabecera con foto, tarjetas como en el inicio,
   inscripciones y pagos, estadísticas y consentimientos
   ================================================================ */
#section-account {
  display: grid;
  gap: 1.25rem;
}

#section-account .account-page__intro {
  margin-bottom: 0;
}

.account-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  border-radius: 24px;
  background: linear-gradient(135deg, #16224f 0%, #2443d6 100%);
  color: #ffffff;
}

.account-hero::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 28px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.account-hero__photo {
  position: relative;
  flex-shrink: 0;
}

#section-account .account-hero .account-photo {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  background-color: #dcf56b;
  color: #16224f;
  font-size: 2.4rem;
  font-weight: 900;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
}

#section-account .account-hero .account-photo.is-uploading {
  opacity: 0.55;
}

.account-hero__camera {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 3px solid #16224f;
  border-radius: 50%;
  background: #dcf56b;
  color: #16224f;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.account-hero__camera:hover {
  transform: scale(1.06);
}

.account-hero__camera svg {
  width: 18px;
  height: 18px;
}

.account-hero__info {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.account-hero__name {
  font-size: clamp(1.35rem, 3.5vw, 1.8rem);
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.account-hero__email {
  color: rgba(255, 255, 255, 0.78);
  overflow-wrap: anywhere;
}

.account-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.account-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
}

.account-chip--lime {
  background: #dcf56b;
  color: #16224f;
}

.account-chip--warning {
  background: #fef3c7;
  color: #92400e;
}

.account-hero__photo-link {
  justify-self: start;
  margin-top: 0.2rem;
  padding: 0;
  border: none;
  background: none;
  color: #dcf56b;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Resumen de actividad */
#section-account .account-activity {
  border-radius: 24px;
}

.account-activity__refresh {
  border-radius: 999px;
}

.home-stats.account-stats {
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
}

.account-stats .home-stat {
  min-height: 9.5rem;
}

.account-stats .home-stat--enrollments {
  grid-column: auto;
  grid-row: auto;
}

.account-stats .account-stat__money {
  font-size: clamp(1.9rem, 5vw, 2.5rem);
}

.account-stat--pending.is-clear {
  color: #2c3a06;
  background: linear-gradient(160deg, #e4f98b 0%, #c6ea5c 100%);
  border-color: rgba(120, 160, 20, 0.25);
}

#section-account .account-dashboard__sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.account-block {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.account-block__title {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7489;
}

.account-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.account-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px -22px rgba(22, 34, 79, 0.6);
}

.account-item__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eef2ff;
  font-size: 1.25rem;
}

.account-item--padel .account-item__icon {
  background: #ecfccb;
}

.account-item--event .account-item__icon {
  background: #ede9fe;
}

.account-item__body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.account-item__eyebrow {
  color: #3554f0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.account-item__title {
  color: #16224f;
  font-size: 1rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.account-item__meta,
.account-item__notes {
  color: #6b7591;
  font-size: 0.85rem;
}

.account-item__side {
  display: grid;
  justify-items: end;
  gap: 0.3rem;
}

.account-item__amount {
  color: #16224f;
  font-size: 1.2rem;
  font-weight: 900;
  white-space: nowrap;
}

.account-item__status {
  justify-self: end;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #eef1f8;
  color: #16224f;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.account-item__status--inscripcion,
.account-item__status--pagado,
.account-item__status--exento {
  background: #ecfccb;
  color: #3f6212;
}

.account-item__status--en_juego {
  background: #dbeafe;
  color: #1e40af;
}

.account-item__status--pendiente {
  background: #fef3c7;
  color: #92400e;
}

.account-item__status--fallido {
  background: #fee2e2;
  color: #b91c1c;
}

.account-item--pending {
  border-color: #f5dfae;
  background: #fffaf0;
}

.account-item--pending .account-item__icon {
  background: #fef3c7;
}

.account-item--paid .account-item__icon {
  background: #ecfccb;
  color: #3f6212;
  font-weight: 900;
}

.account-item__progress {
  grid-column: 2 / -1;
  display: grid;
  gap: 0.3rem;
}

.account-item__bar {
  height: 8px;
  border-radius: 999px;
  background: #eef1f8;
  overflow: hidden;
}

.account-item__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3554f0, #c6ea5c);
}

.account-item__progress-label {
  color: #6b7591;
  font-size: 0.8rem;
  font-weight: 600;
}

.account-empty {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: #f6f8fc;
  color: #6b7591;
  text-align: center;
}

.account-empty--ok {
  background: #f2fbe0;
  color: #3f6212;
  font-weight: 700;
}

/* Estadísticas */
#section-account .account-stats-card .card-header {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.account-sport-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: #eef1f8;
}

.account-sport-toggle .player-stats-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: none;
  background: transparent;
  color: #6b7591;
  font-weight: 800;
}

.account-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.account-stat-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
}

.account-stat-tile--played {
  background: linear-gradient(160deg, #3e7377 0%, #2b5059 100%);
  color: #ffffff;
}

.account-stat-tile--wins {
  background: linear-gradient(160deg, #e4f98b 0%, #c6ea5c 100%);
  color: #2c3a06;
}

.account-stat-tile--losses {
  background: linear-gradient(160deg, #ee9d80 0%, #e2785a 100%);
  color: #4a1c10;
}

.account-stat-tile__label {
  font-size: 0.85rem;
  font-weight: 700;
}

.account-stat-tile__value {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.account-stat-tile__hint {
  font-size: 0.78rem;
  opacity: 0.8;
}

.account-winrate {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.account-winrate--empty {
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: #f6f8fc;
  color: #6b7591;
  font-size: 0.9rem;
}

.account-winrate__label {
  display: flex;
  justify-content: space-between;
  color: #16224f;
  font-weight: 700;
}

.account-winrate__bar {
  height: 10px;
  border-radius: 999px;
  background: #fde2d8;
  overflow: hidden;
}

.account-winrate__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #c6ea5c, #84cc16);
}

/* Consentimientos en el formulario de datos */
.consent-list {
  display: grid;
  gap: 0.6rem;
  margin: 0.25rem 0 0.5rem;
}

.consent-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #f6f8fc;
  cursor: pointer;
  font-weight: 400;
}

.consent-option input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0.1rem 0 0;
  accent-color: #3554f0;
}

.consent-option__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.consent-option__text strong {
  color: #16224f;
}

.consent-option__text > span {
  color: #4b5675;
  font-size: 0.92rem;
  line-height: 1.45;
}

.consent-option__text small {
  color: #8a93ab;
  font-size: 0.8rem;
}

.consent-option--share {
  background: #f2fbe0;
  border-color: #d9eeb0;
}

.consent-option--reminder {
  background: #fffaf0;
  border-color: #f5dfae;
}

@media (max-width: 900px) {
  .home-stats.account-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-stats .home-stat--enrollments {
    grid-column: 1 / -1;
  }

  #section-account .account-dashboard__sections {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .account-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem;
  }

  .account-stats .home-stat {
    min-height: 8.5rem;
    padding: 0.95rem;
  }

  .account-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .account-item > .account-item__status,
  .account-item__side {
    grid-column: 2;
    justify-self: start;
    justify-items: start;
  }

  .account-item__side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .account-item__progress {
    grid-column: 1 / -1;
  }

  .account-stat-grid {
    gap: 0.45rem;
  }

  .account-stat-tile {
    padding: 0.75rem;
  }

  .account-stat-tile__value {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   Histórico de torneos: tarjetas como el de ligas y cuadros ronda a ronda
   ========================================================================== */

#tournament-history-list {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tournament-history-list > li.league-history-item {
  display: grid;
  gap: 0.75rem;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none;
}

.league-history-champions__runner {
  grid-column: 2;
  color: #6b7591;
  font-size: 0.78rem;
  font-weight: 600;
}

.tournament-history-categories {
  display: grid;
  gap: 1.25rem;
}

.tournament-history-category {
  --category-color: #3554f0;
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid #e3e8f2;
  border-top: 4px solid var(--category-color);
  border-radius: 16px;
  background: #fbfcff;
}

.tournament-history-category__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.tournament-history-category__header h5 {
  margin: 0;
  color: #16224f;
  font-size: 1.05rem;
  font-weight: 800;
}

.tournament-history-category__meta {
  color: #6b7591;
  font-size: 0.85rem;
  font-weight: 600;
}

.tournament-history-bracket {
  display: grid;
  gap: 0.5rem;
}

.tournament-history-bracket__title {
  margin: 0;
  color: #3554f0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tournament-history-bracket__rounds {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(12.5rem, 1fr);
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scroll-snap-type: x proximity;
}

.tournament-history-round {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scroll-snap-align: start;
}

.tournament-history-round__matches {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.6rem;
}

.tournament-history-round__name {
  color: #6b7591;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tournament-history-match {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #e3e8f2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 16px -14px rgba(22, 34, 79, 0.6);
}

.tournament-history-match__player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: #6b7591;
  font-size: 0.85rem;
  font-weight: 600;
}

.tournament-history-match__player span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-history-match__player.is-winner {
  color: #16224f;
  font-weight: 800;
}

.tournament-history-match__mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #dcf56b;
  color: #16224f;
  font-size: 0.7rem;
}

.tournament-history-match__score {
  justify-self: start;
  margin-top: 0.2rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #eef1f8;
  color: #2443d6;
  font-size: 0.75rem;
  font-weight: 800;
}

@media (max-width: 640px) {
  .tournament-history-category {
    padding: 0.8rem;
  }

  .tournament-history-bracket__rounds {
    grid-auto-columns: minmax(11rem, 82%);
  }
}

/* ==========================================================================
   Mi cuenta: gestionar inscripciones (darse de baja)
   ========================================================================== */

.account-item__manage {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #e3e8f2;
}

.account-item__manage-hint {
  color: #6b7591;
  font-size: 0.82rem;
  font-weight: 600;
}

.account-item__manage-hint--locked {
  color: #8a93ad;
}

.account-item__withdraw {
  padding: 0.45rem 0.95rem;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #ffffff;
  color: #b91c1c;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.account-item__withdraw:hover:not(:disabled) {
  border-color: #b91c1c;
  background: #fee2e2;
}

.account-item__withdraw:disabled {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 640px) {
  .account-item__manage {
    grid-column: 1 / -1;
  }

  .account-item__withdraw {
    width: 100%;
  }
}

/* ==========================================================================
   Fichas de liga y torneo: inscritos por categoría, categoría propia y baja
   ========================================================================== */

.tournament-brackets__row.is-mine {
  background: linear-gradient(135deg, #f7fbe4 0%, #ffffff 70%);
}

.tournament-brackets__mine {
  margin-left: 0.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #dcf56b;
  color: #16224f;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
  vertical-align: middle;
}

.tournament-brackets__button--withdraw {
  border-color: #fecaca;
  color: #b91c1c;
}

.tournament-brackets__button--withdraw:hover:not(:disabled) {
  border-color: #b91c1c;
  background: #fee2e2;
  color: #b91c1c;
}

@media (max-width: 640px) {
  .tournament-brackets__row {
    flex-wrap: wrap;
  }

  .tournament-brackets__actions {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Documentos legales: páginas /app/<tipo>.html y modal dentro de la app
   ========================================================================== */

.legal-body {
  margin: 0;
  min-height: 100vh;
  background: #f4f6fb;
  color: #2b3553;
  font-family: 'Urbanist', system-ui, sans-serif;
}

.legal-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.legal-page__header {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 1.5rem;
  border-radius: 24px;
  background: linear-gradient(135deg, #16224f 0%, #2443d6 100%);
  color: #ffffff;
}

.legal-page__back {
  justify-self: start;
  color: #dcf56b;
  font-weight: 800;
  text-decoration: none;
}

.legal-page__eyebrow {
  color: #c7d2fe;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legal-page__header h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.1;
}

.legal-page__subtitle {
  margin: 0;
  color: #e0e7ff;
}

.legal-page__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.legal-page__nav a {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.legal-page__nav a[aria-current='page'] {
  background: #dcf56b;
  color: #16224f;
}

.legal-page__content {
  padding: 1.5rem;
  border: 1px solid #e3e8f2;
  border-radius: 24px;
  background: #ffffff;
}

.legal-page__content,
.legal-content {
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.legal-page__content h1,
.legal-content h1 {
  display: none;
}

.legal-page__content h2,
.legal-content h2 {
  margin: 1.6rem 0 0.5rem;
  color: #16224f;
  font-size: 1.15rem;
}

.legal-page__content h3,
.legal-content h3 {
  margin: 1rem 0 0.35rem;
  color: #2443d6;
  font-size: 1rem;
}

.legal-page__content a,
.legal-content a {
  color: #2443d6;
  font-weight: 600;
}

.legal-page__content table,
.legal-content table {
  width: 100%;
  margin: 0.75rem 0;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.legal-page__content th,
.legal-page__content td,
.legal-content th,
.legal-content td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #e3e8f2;
  text-align: left;
  vertical-align: top;
}

.legal-page__content th,
.legal-content th {
  background: #f1f4fb;
  color: #16224f;
}

.legal-page__content td:first-child,
.legal-content td:first-child {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  word-break: break-all;
}

.legal-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 0.25rem 0.5rem;
}

.legal-content__empty {
  color: #6b7591;
  font-style: italic;
}

.legal-content__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e3e8f2;
}

.legal-content__page-link {
  color: #2443d6;
  font-weight: 700;
}

.legal-editor__notice {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid #f5dfae;
  border-radius: 14px;
  background: #fffaf0;
  color: #92400e;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .legal-page {
    padding: 1rem 0.75rem 2rem;
  }

  .legal-page__header,
  .legal-page__content {
    padding: 1.1rem;
    border-radius: 18px;
  }

  .legal-page__content table,
  .legal-content table {
    display: block;
    overflow-x: auto;
  }
}

/* ==================== Chat ==================== */
.chat-section__intro {
  margin-bottom: 1rem;
}

.chat-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 1rem;
  height: calc(100dvh - 15rem);
  min-height: 460px;
}

.chat-layout .card {
  margin: 0;
  min-height: 0;
}

.chat-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.chat-sidebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chat-sidebar__actions button {
  flex: 1 1 auto;
}

.chat-sidebar__search {
  width: 100%;
}

.chat-list {
  list-style: none;
  margin: 0 -0.5rem;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.chat-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.chat-list__item:hover {
  background: var(--bg-secondary);
  transform: none;
}

.chat-list__item.is-active {
  background: var(--accent-soft);
}

.chat-list__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.chat-list__top,
.chat-list__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.chat-list__title {
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-list__time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.chat-list__preview {
  font-size: 0.85rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-list__item.has-unread .chat-list__preview {
  color: var(--text-primary);
  font-weight: 600;
}

.chat-list__item.has-unread .chat-list__time {
  color: var(--accent);
  font-weight: 700;
}

.chat-list__badge {
  flex-shrink: 0;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
}

.chat-list__empty {
  margin: 0.5rem 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.chat-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  font-size: 0.9rem;
}

.chat-avatar--league {
  background: #e8edfd;
  color: #3554f0;
}

.chat-avatar--tournament {
  background: #fef3c7;
  color: #b45309;
}

.chat-avatar--event {
  background: #ede9fe;
  color: #6d28d9;
}

.chat-avatar--match {
  background: var(--brand-lime);
  color: var(--brand-lime-ink);
}

.chat-avatar--support {
  background: var(--brand-navy);
  color: #fff;
}

.chat-avatar--direct {
  border-radius: 50%;
  background: #e0f2fe;
  color: #075985;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.chat-thread__empty {
  margin: auto;
  max-width: 320px;
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
}

.chat-thread__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.75rem;
  border-radius: 22px;
  background: var(--accent-soft);
  color: var(--accent);
}

.chat-thread__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--card-border);
}

.chat-thread__back {
  display: none;
  flex: 0 0 auto;
  width: 2.5rem;
  min-width: 0;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.chat-thread__heading {
  flex: 1;
  min-width: 0;
}

.chat-thread__heading h3 {
  margin: 0;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread__heading p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.chat-thread__lock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--bg-primary);
}

.chat-messages__status,
.chat-messages__empty {
  margin: auto;
  color: var(--text-muted);
  text-align: center;
}

.chat-messages__empty svg {
  width: 2rem;
  height: 2rem;
}

.chat-messages__older {
  text-align: center;
  margin-bottom: 0.5rem;
}

.chat-day {
  text-align: center;
  margin: 0.6rem 0 0.3rem;
}

.chat-day span {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: #e7ecf6;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}

.chat-message {
  display: flex;
}

.chat-message--mine {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: min(78%, 560px);
  padding: 0.45rem 0.8rem 0.35rem;
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  border: 1px solid var(--card-border);
}

.chat-message--mine .chat-bubble {
  border-radius: 18px 18px 6px 18px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.chat-bubble__author {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.1rem;
}

.chat-bubble__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.chat-message--deleted .chat-bubble__text {
  font-style: italic;
  opacity: 0.7;
}

.chat-bubble__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.chat-message--mine .chat-bubble__meta {
  color: rgba(255, 255, 255, 0.75);
}

.chat-bubble__delete {
  padding: 0 0.25rem;
  min-height: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  opacity: 0;
}

.chat-bubble:hover .chat-bubble__delete,
.chat-bubble__delete:focus-visible {
  opacity: 1;
}

.chat-staff-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--brand-navy);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  vertical-align: middle;
}

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--card-border);
  background: #fff;
}

.chat-composer textarea {
  flex: 1;
  min-height: 2.75rem;
  max-height: 160px;
  resize: none;
  border-radius: 22px;
  padding: 0.7rem 1rem;
  line-height: 1.35;
}

.chat-composer__send {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-thread__readonly {
  margin: 0;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--card-border);
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.chat-open-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.league-panel-card__chat {
  align-self: flex-start;
}

.my-match-chat {
  width: 100%;
}

.chat-picker {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chat-picker__label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.chat-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 50vh;
  overflow-y: auto;
}

.chat-picker__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.chat-picker__item:hover {
  background: var(--bg-secondary);
  transform: none;
}

.chat-picker__status {
  padding: 0.75rem 0.5rem;
  color: var(--text-muted);
}

/* Móvil: lista o conversación, una cada vez */
@media (max-width: 860px) {
  .chat-layout {
    grid-template-columns: 1fr;
    height: calc(100dvh - 11rem);
  }

  .chat-layout--thread .chat-sidebar,
  .chat-layout:not(.chat-layout--thread) .chat-thread {
    display: none;
  }

  .chat-section--thread .chat-section__intro {
    display: none;
  }

  .chat-section--thread .chat-layout {
    height: calc(100dvh - 8.5rem);
  }

  .chat-bubble__delete {
    opacity: 0.6;
  }

  .chat-thread__back {
    display: inline-flex;
  }

  .chat-thread__lock span {
    display: none;
  }

  .chat-bubble {
    max-width: 85%;
  }
}

/* Chat: adjuntos, respuestas y notas de voz */
.chat-thread.is-dragging {
  outline: 3px dashed var(--accent);
  outline-offset: -6px;
}

.chat-bubble--media {
  padding: 0.25rem 0.25rem 0.3rem;
}

.chat-bubble--media .chat-bubble__meta,
.chat-bubble--media .chat-bubble__author {
  padding: 0 0.5rem;
}

.chat-message.is-highlighted .chat-bubble {
  box-shadow: 0 0 0 3px var(--brand-lime);
}

.chat-bubble__action {
  padding: 0 0.25rem;
  min-height: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  opacity: 0;
}

.chat-bubble:hover .chat-bubble__action,
.chat-bubble__action:focus-visible {
  opacity: 1;
}

.chat-bubble__text a {
  color: inherit;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.chat-quote {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  margin: 0.15rem 0 0.35rem;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text-primary);
  text-align: left;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: none;
}

.chat-message--mine .chat-quote {
  border-left-color: var(--brand-lime);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.chat-quote span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}

.chat-media {
  display: grid;
  gap: 3px;
  width: min(300px, 62vw);
  margin-bottom: 0.25rem;
  border-radius: 14px;
  overflow: hidden;
}

.chat-media--2,
.chat-media--3,
.chat-media--4 {
  grid-template-columns: 1fr 1fr;
}

.chat-media--3 .chat-media__item:first-child {
  grid-column: span 2;
}

.chat-media__item {
  display: block;
  background: var(--bg-secondary);
}

.chat-media__item img,
.chat-media__item video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
}

.chat-media--1 .chat-media__item img {
  height: auto;
  object-fit: contain;
}

.chat-media--2 .chat-media__item img,
.chat-media--3 .chat-media__item img,
.chat-media--4 .chat-media__item img {
  aspect-ratio: 1;
}

.chat-audio {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.15rem 0 0.25rem;
}

.chat-audio__label {
  font-size: 0.78rem;
  font-weight: 600;
}

.chat-audio audio {
  width: min(260px, 60vw);
  height: 36px;
}

.chat-file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.15rem 0 0.25rem;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--text-primary);
  text-decoration: none;
  max-width: 280px;
}

.chat-message--mine .chat-file {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.chat-file__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--accent);
}

.chat-message--mine .chat-file__icon {
  color: #fff;
}

.chat-file__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-file__name {
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-file__size {
  font-size: 0.72rem;
  opacity: 0.75;
}

.chat-icon-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.75rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.chat-icon-button:hover {
  color: var(--accent);
  background: transparent;
  transform: none;
}

.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  border-top: 1px solid var(--card-border);
  background: #fff;
}

.chat-reply-bar__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-left: 0.6rem;
  border-left: 3px solid var(--accent);
}

.chat-reply-bar__author {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

.chat-reply-bar__text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pending {
  list-style: none;
  margin: 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--card-border);
  background: #fff;
}

.chat-pending.is-sending {
  opacity: 0.55;
}

.chat-pending__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 220px;
  padding: 0.3rem 0.2rem 0.3rem 0.35rem;
  border-radius: 12px;
  background: var(--accent-soft);
}

.chat-pending__item img,
.chat-pending__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  object-fit: cover;
}

.chat-pending__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--accent);
}

.chat-pending__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-pending__name {
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pending__size {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.chat-pending__item .chat-icon-button {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.1rem;
}

.chat-recording {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 0.5rem 0 1rem;
  border-radius: 22px;
  background: var(--bg-primary);
}

.chat-recording__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--danger, #ef4444);
  animation: chat-recording-pulse 1s ease-in-out infinite;
}

.chat-recording__time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chat-recording__hint {
  flex: 1;
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-composer__send.is-recording {
  background: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
}

@keyframes chat-recording-pulse {
  50% {
    opacity: 0.3;
  }
}

@media (max-width: 860px) {
  .chat-bubble__action {
    opacity: 0.6;
  }
}

/* ==========================================================================
   Mi nivel (nivel de juego 0-7, experiencia y clasificación)
   ========================================================================== */
.my-level__intro {
  margin-bottom: 1.5rem;
}

.my-level__title {
  margin: 0;
  font-size: clamp(1.8rem, 6vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-navy, #16224f);
}

.my-level__actions {
  margin-top: 0.9rem;
}

.my-level__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1100px) {
  .my-level__grid {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  }
}

.my-level__cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.level-loading {
  color: var(--text-secondary);
}

.level-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.4rem;
}

.level-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.level-card__sport {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.level-card__main {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.level-ring {
  position: relative;
  width: 124px;
  height: 124px;
  flex: 0 0 auto;
}

.level-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.level-ring circle {
  fill: none;
  stroke-width: 10;
}

.level-ring__track {
  stroke: var(--accent-soft);
}

.level-ring__value {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}

.level-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.level-ring__label strong {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
}

.level-ring__label span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.level-card__summary {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.level-card__band {
  font-size: 1.1rem;
  color: var(--text-primary);
}

.level-reliability {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.level-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  overflow: hidden;
}

.level-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.level-bar--xp span {
  background: linear-gradient(90deg, #a3d93b, var(--brand-lime, #dcf56b));
}

.level-stats {
  display: flex;
  gap: 1.25rem;
  margin: 0;
}

.level-stats div {
  display: flex;
  flex-direction: column;
}

.level-stats dt {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.level-stats dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.level-xp {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}

.level-xp__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.level-xp__badge {
  font-weight: 700;
  color: var(--brand-lime-ink, #2f3d0a);
  background: var(--brand-lime, #dcf56b);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

.level-xp__hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.level-initial {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--card-border);
  border-radius: var(--radius-sm);
}

.level-initial label {
  font-weight: 700;
  color: var(--text-primary);
}

.level-initial__row {
  display: flex;
  gap: 0.5rem;
}

.level-initial__row select {
  flex: 1;
  min-width: 0;
}

.level-initial__hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.level-card__history h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.level-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.level-history__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.level-history__result {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: var(--danger);
}

.level-history__item.is-won .level-history__result {
  background: var(--success);
}

.level-history__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.level-history__body strong,
.level-history__body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-history__body span {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.level-history__delta {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.level-history__delta.is-up {
  color: var(--success);
}

.level-history__delta.is-down {
  color: var(--danger);
}

.level-history__empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.level-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.level-chip--muted {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.level-chip--warning {
  background: #fef3c7;
  color: #92400e;
}

.level-chip--success {
  background: #dcfce7;
  color: #166534;
}

.level-chip--danger {
  background: #fee2e2;
  color: #991b1b;
}

.level-board {
  padding: 1.25rem;
}

.level-board .card-header {
  flex-wrap: wrap;
  gap: 0.6rem;
}

.level-board__tabs {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-secondary);
}

.level-board__tabs button {
  border: 0;
  background: transparent;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.level-board__tabs button.is-active {
  background: var(--card-bg, #fff);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.level-board__list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.level-board__row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  grid-template-areas: 'pos name level' 'pos meta level';
  align-items: center;
  column-gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
}

.level-board__row.is-me {
  background: var(--accent-soft);
}

.level-board__pos {
  grid-area: pos;
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
}

.level-board__name {
  grid-area: name;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-board__meta {
  grid-area: meta;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.level-board__level {
  grid-area: level;
  font-size: 1.1rem;
  color: var(--accent);
}

.level-board__empty,
.level-board__hint {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.level-board__hint {
  margin: 0.75rem 0 0;
}

/* Partidos privados (Mis partidos) */
.private-matches {
  margin-bottom: 1.25rem;
  padding: 1.25rem;
}

.private-matches__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.private-matches__header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.private-matches__group h4 {
  margin: 1rem 0 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.private-matches__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.private-matches__empty {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.private-match {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem 0.9rem;
  padding: 0.85rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.private-match__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  background: #fee2e2;
  color: #991b1b;
}

.private-match.is-won .private-match__score {
  background: #dcfce7;
  color: #166534;
}

.private-match__result {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.private-match__score strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.private-match__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.private-match__body > span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.private-match__body .private-match__notes {
  font-style: italic;
}

.private-match__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Formulario de partido privado */
.private-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.private-form__intro {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.private-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.88rem;
}

.private-form__sets {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.private-form__sets legend {
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.private-form__set {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 64px auto 64px;
  align-items: center;
  gap: 0.5rem;
}

.private-form__set input {
  text-align: center;
}

.private-form__error {
  margin: 0;
  color: var(--danger);
  font-weight: 600;
}

.private-matches__header h3 .badge {
  position: static;
  margin: 0;
}

.private-form__set {
  grid-template-columns: 7.5rem 64px auto 64px;
  justify-content: start;
}

.private-match__score--candidate {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.private-match__problem {
  color: #92400e;
  font-weight: 600;
}

.private-form__reservation {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.private-form__partner {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.private-form__partner legend {
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.private-form__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  cursor: pointer;
}

.private-form__choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
/* Ficha del partido de una reserva */
.reservation-match {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.reservation-match h4 {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
}

.reservation-match__players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.reservation-match__players li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.reservation-match__hint {
  margin: 0;
  color: var(--text-secondary);
}