/* ============================================================
   SportApp Admin — Estilo Elera (fase 0, JCB-289)
   Estilo base de /admin/* y de las páginas de acceso (login, sign-up,
   mylogin, reset y reset-password): reemplaza al estilo coral y sus
   temas (opción C de JCB-288). Aplica donde <html> tiene la clase
   sa-elera; cpanel y player siguen con sportapp-modern.css y sus temas.
   Se apoya en sportapp-modern.css y sportapp-base-2026.css (foco y
   accesibilidad de JCB-249). Modo oscuro con html.dark (botón en el
   header del admin, preferencia sa-dark en localStorage).
   Alcance: tokens, canvas, sidebar, header, footer, banners, superficie
   de cards, botones y páginas de acceso.

   Valores tomados de las capturas de referencia: sidebar, header y
   canvas comparten un mismo gris cálido sin líneas divisorias; las
   cards blancas se separan del fondo solo con sombra.
   ============================================================ */

/* --- Tokens --- */
html.sa-elera {
  /* Superficies: un solo fondo para sidebar, header y canvas */
  --bg-app:          #F4F3F1;
  --bg-primary:      #F4F3F1;
  --bg-secondary:    #EBEAE7;
  --bg-card:         #FFFFFF;
  --bg-sidebar:      #F4F3F1;

  /* Texto */
  --text-heading:    #1F1F1F;
  --text-primary:    #2B2B2B;
  --text-secondary:  #5C5C5C;
  --text-muted:      #6B6B6B;

  /* Verde. --accent-fill es el verde claro de la referencia (ítem activo,
     botón verde) y lleva texto oscuro encima. --accent es el verde para
     foco y bordes (3:1 sobre el fondo) y --accent-text para texto verde (AA). */
  --accent-fill:       #7ED473;
  --accent-fill-hover: #6CC961;
  --accent:            #2F9E44;
  --accent-hover:      #278A3A;
  --accent-active:     #1F7A36;
  --accent-tint:       #E3F5E0;
  --accent-text:       #1F7A36;

  /* Botón primario gris oscuro */
  --btn-primary-bg:       #424242;
  --btn-primary-bg-hover: #2E2E2E;
  --btn-primary-text:     #FFFFFF;

  /* Tints de estado para badges suaves */
  --success-tint:    #E3F5E0;
  --error-tint:      #FBE4E1;
  --warning-tint:    #FCEFD9;
  --info-tint:       #E3ECFB;

  --border-color:    #E6E5E2;

  /* Superficies y estados que no cubren los tokens base */
  --bg-muted:                 #E8E7E4;
  --btn-default-hover-bg:     #F7F6F4;
  --btn-default-hover-border: #D9D8D4;
  --focus-ring:               rgba(47, 158, 68, 0.18);
  --banner-error-text:        #7A1F17;
  --banner-error-icon:        #D93A2B;
  /* Banner de ayuda: amarillo neutro, texto oscuro */
  --banner-help-bg:           #FBF3DE;
  --banner-help-icon:         #F2C94C;

  --radius:          8px;
  --radius-lg:       16px;
  --radius-xl:       20px;

  /* Sombras: visibles pero suaves, como las cards de la referencia */
  --shadow-xs: 0 1px 2px rgba(31, 31, 31, 0.06);
  --shadow-sm: 0 1px 2px rgba(31, 31, 31, 0.06), 0 4px 14px rgba(31, 31, 31, 0.06);
  --shadow-md: 0 2px 4px rgba(31, 31, 31, 0.06), 0 10px 28px rgba(31, 31, 31, 0.09);
  --shadow-lg: 0 4px 10px rgba(31, 31, 31, 0.07), 0 18px 44px rgba(31, 31, 31, 0.12);

  /* Series de las gráficas del dashboard (3:1 sobre la card) */
  --chart-total:     #8A8883;
  --chart-paid:      #2F9E44;
  --chart-played:    #2F9E44;
  --chart-unplayed:  #D93A2B;
  --chart-scheduled: #3B6FD1;

  /* Texto de badges de advertencia (AA sobre --warning-tint) */
  --badge-warning-text: #7A4E00;

  --elera-sidebar-width: 240px;
  --elera-control-height: 34px;
}

/* Buscador del header: solo en pantallas anchas (ver regla más abajo) */
.sa-elera-search {
  display: none;
}

/* --- Canvas: un solo fondo, sin líneas divisorias --- */
html.sa-elera body,
html.sa-elera .wrapper,
html.sa-elera .content-wrapper {
  background-color: var(--bg-app) !important;
}

html.sa-elera body {
  color: var(--text-primary);
  font-size: 14px;
}

/* --- Sidebar --- */
html.sa-elera .main-sidebar {
  background: var(--bg-sidebar) !important;
  border-right: none !important;
  box-shadow: none;
}

@media (min-width: 768px) {
  html.sa-elera body:not(.sidebar-collapse) .main-sidebar {
    width: var(--elera-sidebar-width);
  }
  html.sa-elera body:not(.sidebar-collapse) .content-wrapper,
  html.sa-elera body:not(.sidebar-collapse) .main-footer {
    margin-left: var(--elera-sidebar-width);
  }
  html.sa-elera body:not(.sidebar-collapse) .main-header .logo {
    width: var(--elera-sidebar-width);
  }
}

html.sa-elera .main-sidebar .sidebar {
  padding: 0 16px 16px;
}

html.sa-elera .sidebar-collapse .main-sidebar .sidebar {
  padding: 0;
}

/* Etiquetas de sección: gris, en tipo oración ("Operación"), sin mayúsculas */
html.sa-elera .sidebar-menu > li.header {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--text-muted);
  background: transparent !important;
  opacity: 1;
  padding: 18px 10px 6px;
}

html.sa-elera .sidebar-menu > li.header::first-letter {
  text-transform: uppercase;
}

html.sa-elera .sidebar-menu > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  margin: 1px 0;
  border-left: none !important;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
}

html.sa-elera .sidebar-menu > li > a > span {
  flex: 1;
  min-width: 0;
}

html.sa-elera .sidebar-menu > li > a:hover {
  background: var(--bg-secondary);
  color: var(--text-heading);
}

/* Íconos lineales en gris, sin chip */
html.sa-elera .sidebar-menu > li > a > .fa:first-child,
html.sa-elera .sidebar-menu > li > a > .ion:first-child {
  flex: 0 0 auto;
  width: 18px;
  margin-right: 0;
  text-align: center;
  font-size: 15px;
  color: var(--text-secondary);
  background: none;
  opacity: 1;
}

/* Ítem activo: bloque verde sólido con texto oscuro */
html.sa-elera .sidebar-menu > li.active > a,
html.sa-elera .sidebar-menu > li.active > a:hover {
  background: var(--accent-fill) !important;
  color: var(--text-heading) !important;
  font-weight: 500;
}

html.sa-elera .sidebar-menu > li.active > a > .fa,
html.sa-elera .sidebar-menu > li.active > a > .ion {
  color: var(--text-heading) !important;
}

/* AdminLTE centra flecha y badges con position:absolute; dentro del flex van en línea */
html.sa-elera .sidebar-menu > li > a > .pull-right {
  position: static;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  color: var(--text-muted);
}

/* Submenú */
html.sa-elera .sidebar-menu .treeview-menu {
  background: transparent !important;
  margin: 2px 0 6px;
  padding: 0;
}

html.sa-elera .sidebar-menu .treeview-menu > li > a {
  padding: 6px 10px 6px 38px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 14px;
}

html.sa-elera .sidebar-menu .treeview-menu > li > a:hover {
  background: var(--bg-secondary);
  color: var(--text-heading);
}

html.sa-elera .sidebar-menu .treeview-menu > li.active > a {
  color: var(--text-heading) !important;
  font-weight: 500;
  background: var(--bg-secondary);
}

html.sa-elera .sidebar-menu .treeview-menu > li > a > .fa-circle-o {
  font-size: 7px;
  width: 10px;
  vertical-align: middle;
  color: var(--text-muted);
}

html.sa-elera .sidebar-menu .treeview-menu > li.active > a > .fa-circle-o {
  color: var(--accent);
}

/* Badges de conteo: rectángulo gris redondeado */
html.sa-elera .sidebar-menu .label,
html.sa-elera .sidebar-menu .badge {
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-muted);
  margin-top: 0;
}

html.sa-elera .sidebar-menu > li.active .label,
html.sa-elera .sidebar-menu > li.active .badge {
  color: var(--text-heading);
  background: rgba(255, 255, 255, 0.55);
}

/* Menú colapsado (sidebar-mini): conservar el comportamiento de AdminLTE */
@media (min-width: 768px) {
  html.sa-elera .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
    justify-content: center;
    padding: 6px 0;
    margin: 2px 7px;
  }
  html.sa-elera .sidebar-mini.sidebar-collapse .sidebar-menu > li.header {
    display: none;
  }
  html.sa-elera .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu,
  html.sa-elera .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-md);
  }
  html.sa-elera .sidebar-mini.sidebar-collapse .sidebar-menu .treeview-menu > li > a {
    padding-left: 16px;
  }
}

/* --- Header: mismo fondo, sin líneas --- */
html.sa-elera .main-header {
  background: var(--bg-app);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

html.sa-elera .main-header .logo {
  justify-content: flex-start;
  padding: 0 26px;
  background: var(--bg-app) !important;
  border: none !important;
}

html.sa-elera .main-header .logo .logo-lg {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
}

html.sa-elera .main-header .navbar {
  background: var(--bg-app) !important;
  border: none !important;
  min-height: 60px;
}

html.sa-elera .main-header .navbar .sidebar-toggle {
  color: var(--text-secondary);
}

html.sa-elera .main-header .navbar .sidebar-toggle:hover {
  color: var(--text-heading);
  background: transparent;
}

/* Barra del header en flex: botón de menú, nombre del cliente, buscador y
   acciones quedan centrados verticalmente. AdminLTE los alinea con floats y
   paddings de Bootstrap (15px arriba, 0 abajo en el nombre), lo que dejaba
   el nombre del cliente y el del usuario más arriba que el resto. */
@media (min-width: 768px) {
  html.sa-elera .main-header .navbar {
    display: flex;
    align-items: center;
    height: 60px;
  }

  html.sa-elera .main-header .navbar::before,
  html.sa-elera .main-header .navbar::after {
    display: none;
  }

  html.sa-elera .main-header .navbar > .sidebar-toggle,
  html.sa-elera .main-header .navbar > .navbar-custom-menu,
  html.sa-elera .main-header .navbar > .sa-elera-search {
    float: none !important;
    flex: 0 0 auto;
  }

  html.sa-elera .main-header .navbar > .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    height: var(--elera-control-height);
    padding: 0 16px;
  }

  html.sa-elera .main-header .navbar > .navbar-custom-menu:not(.pull-left) {
    margin-left: auto;
  }

  html.sa-elera .main-header .navbar .navbar-custom-menu > .nav {
    display: flex;
    align-items: center;
    float: none;
    margin: 0;
  }

  html.sa-elera .main-header .navbar .navbar-custom-menu > .nav > li {
    float: none;
  }

  html.sa-elera .main-header .navbar .navbar-custom-menu > .nav > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 20px;
  }

  /* Nombre del cliente */
  html.sa-elera .main-header .navbar .navbar-custom-menu.pull-left > .nav > li > a {
    padding: 0 12px !important;
    height: var(--elera-control-height);
  }

  html.sa-elera .main-header .navbar .navbar-custom-menu.pull-left > .nav > li > a > span {
    font-size: 18px !important;
    line-height: 1.2;
  }

  /* Usuario: avatar y nombre en la misma línea media */
  html.sa-elera .main-header .navbar .navbar-custom-menu > .nav > li.user-menu > a {
    padding: 0 8px 0 10px;
    height: 44px;
  }

  html.sa-elera .main-header .navbar .navbar-custom-menu .user-menu > a > img.user-image {
    margin: 0 !important;
    float: none !important;
  }

  html.sa-elera .main-header .navbar .sa-elera-search,
  html.sa-elera .main-header .navbar .navbar-custom-menu:not(.pull-left) > .nav > li.notifications-menu > a,
  html.sa-elera .main-header .navbar .navbar-custom-menu:not(.pull-left) > .nav > li.sa-header-btn > a {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Botones de utilidad del header (Ayuda): cuadro con borde fino */
html.sa-elera .navbar-custom-menu:not(.pull-left) {
  padding-right: 12px;
}

html.sa-elera .navbar-custom-menu:not(.pull-left) > .nav > li > a {
  color: var(--text-secondary);
}

html.sa-elera .navbar-custom-menu:not(.pull-left) > .nav > li.notifications-menu > a,
html.sa-elera .navbar-custom-menu:not(.pull-left) > .nav > li.sa-header-btn > a {
  height: var(--elera-control-height);
  margin: 13px 6px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-app);
  font-size: 13px;
}

html.sa-elera .navbar-custom-menu > .nav > li > a:hover,
html.sa-elera .navbar-custom-menu > .nav > li.open > a,
html.sa-elera .navbar-custom-menu > .nav > li > a:focus {
  color: var(--text-heading);
  background: var(--bg-secondary) !important;
}

html.sa-elera .navbar-custom-menu > .nav > li.user-menu > a:hover,
html.sa-elera .navbar-custom-menu > .nav > li.user-menu.open > a {
  background: transparent !important;
}

html.sa-elera .navbar-custom-menu:not(.pull-left) > .nav > li.sa-header-btn > a {
  width: var(--elera-control-height);
  justify-content: center;
  padding: 0;
  margin-left: 0;
  font-size: 15px;
}

/* Avatar con anillo */
html.sa-elera .navbar-custom-menu .user-menu > a > img.user-image {
  width: 36px !important;
  height: 36px !important;
  padding: 2px;
  background: var(--bg-card);
  border: 2px solid var(--accent-fill);
}

/* Buscador */
@media (min-width: 992px) {
  html.sa-elera .sa-elera-search {
    display: flex;
    float: left;
    align-items: center;
    position: relative;
    width: 260px;
    margin: 13px 0 13px 8px;
  }
}

html.sa-elera .sa-elera-search .fa-search {
  position: absolute;
  left: 12px;
  font-size: 13px;
  color: var(--text-muted);
  pointer-events: none;
}

html.sa-elera .sa-elera-search input {
  width: 100%;
  height: var(--elera-control-height);
  padding: 0 52px 0 34px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 14px;
  box-shadow: none;
}

html.sa-elera .sa-elera-search input::placeholder {
  color: var(--text-muted);
}

html.sa-elera .sa-elera-search input:focus {
  outline: none;
  background: var(--bg-card);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

html.sa-elera .sa-elera-search kbd {
  position: absolute;
  right: 8px;
  padding: 1px 6px;
  border: none;
  border-radius: 5px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  box-shadow: none;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
}

/* Título de página */
html.sa-elera .content-header {
  padding: 18px 24px 4px;
}

html.sa-elera .content-header > h1 {
  font-family: var(--font-family);
  /* px: Bootstrap 3 fija html { font-size: 10px }, así que rem queda chico */
  font-size: clamp(24px, 1vw + 16px, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-heading);
}

html.sa-elera .content-header > h1 > small {
  font-size: 14px;
  color: var(--text-muted);
}

html.sa-elera .breadcrumb {
  background: transparent !important;
}

html.sa-elera .breadcrumb > li,
html.sa-elera .breadcrumb > .active {
  color: var(--text-muted);
  font-size: 13px;
}

html.sa-elera .breadcrumb > li a {
  color: var(--text-secondary);
}

html.sa-elera .breadcrumb > li a:hover {
  color: var(--text-heading);
}

html.sa-elera .content {
  padding: 12px 24px 24px;
}

/* --- Footer: mismo fondo, sin línea; copyright, legales y versión centrados --- */
html.sa-elera .main-footer {
  background: var(--bg-app) !important;
  border-top: none !important;
  color: var(--text-muted);
  font-size: 13px;
}

html.sa-elera .sa-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 18px;
  padding: 16px 24px 20px;
  text-align: center;
}

html.sa-elera .sa-footer-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Contacto de soporte por WhatsApp: el icono toma el verde de la marca, que el
   tema claro/oscuro ya resuelve con --accent-text. El numero se mantiene visible
   en movil; .sa-footer-links ya envuelve para que el footer no se desborde. */
html.sa-elera .sa-footer-soporte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html.sa-elera .sa-footer-soporte .fa-whatsapp {
  color: var(--accent-text);
  font-size: 15px;
}

html.sa-elera .sa-footer a {
  color: var(--text-secondary);
}

html.sa-elera .sa-footer a:hover,
html.sa-elera .sa-footer a:focus {
  color: var(--text-heading);
  text-decoration: underline;
}

/* --- Banner contextual (morosidad): card con tinte, ícono, texto y acción --- */
html.sa-elera .sa-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 24px 0;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  font-size: 14px;
  text-align: left;
}

/* Banner global (entre header y contenido): se recorre junto al sidebar */
@media (min-width: 768px) {
  html.sa-elera body:not(.sidebar-collapse) .wrapper > .sa-banner {
    margin-left: calc(var(--elera-sidebar-width) + 24px);
  }
  html.sa-elera body.sidebar-mini.sidebar-collapse .wrapper > .sa-banner {
    margin-left: 74px;
  }
}

/* Banner dentro de una página: arriba de su contenido */
html.sa-elera .content > .sa-banner {
  margin: 0 0 16px;
}

/* Banner dentro de un modal: sin margenes laterales propios */
html.sa-elera .modal-body > .sa-banner {
  margin: 0 0 16px;
}

/* Ayuda / información del módulo: amarillo neutro */
html.sa-elera .sa-banner--help {
  background: var(--banner-help-bg);
  color: var(--text-primary);
}

html.sa-elera .sa-banner--help .sa-banner-icon {
  background: var(--banner-help-icon);
  color: #1F1F1F;
}

html.sa-elera .sa-banner-text a {
  color: var(--text-heading);
  text-decoration: underline;
}

html.sa-elera .sa-banner-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

html.sa-elera .sa-banner--error {
  background: var(--error-tint);
  color: var(--banner-error-text);
}

html.sa-elera .sa-banner-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

html.sa-elera .sa-banner--error .sa-banner-icon {
  background: var(--banner-error-icon);
  color: #FFFFFF;
}

html.sa-elera .sa-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

html.sa-elera .sa-banner-title {
  color: var(--text-heading);
  font-weight: 600;
}

html.sa-elera .sa-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  font-size: 13px;
}

html.sa-elera .sa-banner-meta strong {
  font-weight: 500;
}

html.sa-elera .sa-banner-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 767px) {
  html.sa-elera .sa-banner {
    flex-wrap: wrap;
  }
  html.sa-elera .wrapper > .sa-banner {
    margin: 10px 14px 0;
  }
  html.sa-elera .sa-banner-action {
    width: 100%;
  }
}

/* --- Cards: blancas, radio grande y sombra; sin líneas internas --- */
html.sa-elera .box,
html.sa-elera .nav-tabs-custom,
html.sa-elera .info-box,
html.sa-elera .small-box {
  background: var(--bg-card);
  border: none !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

html.sa-elera .box.no-border {
  background: transparent;
  box-shadow: none;
}

html.sa-elera .box-header,
html.sa-elera .box-header.with-border {
  border-bottom: none !important;
  padding: 18px 20px 6px;
}

html.sa-elera .box-header .box-title {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-heading);
}

html.sa-elera .box-body {
  padding: 14px 20px 20px;
}

html.sa-elera .box-footer {
  background: transparent;
  border-top: none !important;
  padding: 6px 20px 18px;
}

/* --- Dashboard (fase 1, JCB-290): chips, badges, KPIs y gráficas --- */

/* Chip de ícono: cuadro con tinte verde */
html.sa-elera .sa-chip {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-tint);
  color: var(--accent-text);
  font-size: 16px;
}

/* Badge suave */
html.sa-elera .sa-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html.sa-elera .sa-badge--neutral { background: var(--bg-secondary); color: var(--text-secondary); }
html.sa-elera .sa-badge--success { background: var(--success-tint); color: var(--accent-text); }
html.sa-elera .sa-badge--warning { background: var(--warning-tint); color: var(--badge-warning-text); }
html.sa-elera .sa-badge--error   { background: var(--error-tint);   color: var(--banner-error-text); }

/* Header de card: chip + título + badge + acciones a la derecha */
html.sa-elera .sa-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
html.sa-elera .sa-card-header .box-title {
  margin: 0;
}
html.sa-elera .sa-card-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Selector de mes */
html.sa-elera .sa-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.sa-elera .sa-month-input.form-control,
html.sa-elera .sa-month-input.form-control[readonly] {
  width: 136px;
  height: 32px;
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius);
  /* readonly solo evita escribir; no debe verse deshabilitado */
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* KPIs: chip + etiqueta gris + valor en negritas */
html.sa-elera .sa-dashboard .sa-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 16px 18px;
  margin-bottom: 20px;
}
html.sa-elera .sa-kpi .sa-chip {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 19px;
}
html.sa-elera .sa-kpi .sa-kpi-body {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
}
html.sa-elera .sa-kpi .sa-kpi-label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.sa-elera .sa-kpi .sa-kpi-value {
  display: block;
  margin-top: 2px;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--text-heading);
}
html.sa-elera .sa-kpi .sa-kpi-go {
  color: var(--text-muted);
  font-size: 18px;
}
html.sa-elera .sa-kpi[aria-disabled="true"] {
  cursor: default;
}
html.sa-elera .sa-kpi[aria-disabled="true"] .sa-kpi-go {
  visibility: hidden;
}
html.sa-elera .sa-kpi-loading {
  display: inline-block;
  width: 48px;
  height: 22px;
  vertical-align: middle;
  border-radius: 6px;
  background: var(--bg-secondary);
  animation: sa-kpi-pulse 1.2s ease-in-out infinite;
}
@keyframes sa-kpi-pulse {
  50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  html.sa-elera .sa-kpi-loading { animation: none; }
}

/* Resumen de pagos arriba de la gráfica */
html.sa-elera .sa-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-bottom: 16px;
}
html.sa-elera .sa-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
html.sa-elera .sa-stat-label {
  font-size: 13px;
  color: var(--text-muted);
}
html.sa-elera .sa-stat-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
html.sa-elera .sa-stat .sa-badge {
  margin-top: 4px;
}

/* Contenedores de las gráficas */
html.sa-elera .sa-chart {
  position: relative;
}
html.sa-elera .sa-chart--bar:not(.sa-dash-empty) {
  height: 260px;
}
html.sa-elera .sa-chart--donut:not(.sa-dash-empty) {
  height: 220px;
}

/* Leyenda de la dona: color, estado, cantidad y porcentaje */
html.sa-elera .sa-legend {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
html.sa-elera .sa-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
html.sa-elera .sa-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}
html.sa-elera .sa-legend-label {
  flex: 1;
  color: var(--text-secondary);
}
html.sa-elera .sa-legend-value {
  font-weight: 600;
  color: var(--text-heading);
}
html.sa-elera .sa-legend-pct {
  min-width: 44px;
  text-align: right;
  color: var(--text-muted);
}

@media (max-width: 767px) {
  html.sa-elera .sa-card-actions {
    margin-left: 0;
    width: 100%;
  }
  html.sa-elera .sa-month-input.form-control {
    flex: 1;
    width: auto;
  }
}

/* --- Botones: rectángulo redondeado 8px, compactos --- */
html.sa-elera .btn {
  border-radius: var(--radius) !important;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 20px;
  padding: 6px 14px;
  box-shadow: var(--shadow-xs);
}

html.sa-elera .btn:active {
  transform: none;
}

html.sa-elera .btn-lg {
  padding: 9px 18px;
  font-size: 15px;
}

html.sa-elera .btn-sm {
  padding: 4px 10px;
  font-size: 13px;
}

html.sa-elera .btn-xs {
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 6px !important;
}

/* Primario: gris oscuro */
html.sa-elera .btn-primary {
  background-color: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  font-family: var(--font-family);
}

html.sa-elera .btn-primary:hover,
html.sa-elera .btn-primary:focus,
html.sa-elera .btn-primary:active,
html.sa-elera .btn-primary.active {
  background-color: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-bg-hover) !important;
  color: var(--btn-primary-text) !important;
}

/* Secundario: blanco con borde fino */
html.sa-elera .btn-default {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-heading) !important;
}

html.sa-elera .btn-default:hover,
html.sa-elera .btn-default:focus,
html.sa-elera .btn-default:active,
html.sa-elera .btn-default.active {
  background-color: var(--btn-default-hover-bg) !important;
  border-color: var(--btn-default-hover-border) !important;
  color: var(--text-heading) !important;
}

/* Verde: relleno claro con texto oscuro */
html.sa-elera .btn-success {
  background-color: var(--accent-fill) !important;
  border: 1px solid var(--accent-fill) !important;
  color: var(--text-heading) !important;
}

html.sa-elera .btn-success:hover,
html.sa-elera .btn-success:focus,
html.sa-elera .btn-success:active {
  background-color: var(--accent-fill-hover) !important;
  border-color: var(--accent-fill-hover) !important;
  color: var(--text-heading) !important;
}

html.sa-elera .btn-danger,
html.sa-elera .btn-warning,
html.sa-elera .btn-info {
  border-radius: var(--radius) !important;
}

html.sa-elera .btn-flat {
  box-shadow: none;
}

html.sa-elera .box.no-border .btn-block {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs);
}

html.sa-elera .box.no-border .btn-block:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* Menú de usuario: misma pareja primario/secundario */
html.sa-elera .main-header .navbar .dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

html.sa-elera .main-header .navbar .dropdown-menu .user-header {
  background: var(--bg-app) !important;
}

html.sa-elera .main-header .navbar .dropdown-menu .user-header p {
  color: var(--text-heading) !important;
}

html.sa-elera .main-header .navbar .dropdown-menu .user-footer {
  background: var(--bg-card);
  border-top: none;
}

html.sa-elera .main-header .navbar .dropdown-menu .user-footer .pull-right .btn {
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

html.sa-elera .main-header .navbar .dropdown-menu .user-footer .pull-right .btn:hover {
  background: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-bg-hover) !important;
}

/* --- Foco visible --- */
html.sa-elera :focus-visible {
  outline-color: var(--accent);
}

/* --- Bootstrap Switch: rectángulo con esquinas redondeadas (no píldora) ---
   El contenedor recorta las mitades, así que solo él lleva radio. El lado
   "encendido" usa el verde claro con texto oscuro (AA), como el ítem activo. */
html.sa-elera .bootstrap-switch.bootstrap-switch-wrapper {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important;
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

/* Dentro de .input-group el flex encogía el switch por debajo del ancho que
   calcula el plugin y recortaba "OFF"; además va separado de su etiqueta
   para que ambos tengan las cuatro esquinas redondeadas. */
html.sa-elera .input-group > .bootstrap-switch {
  flex: 0 0 auto;
  margin-left: 8px;
}

html.sa-elera .input-group:has(> .bootstrap-switch) > .input-group-addon {
  border-radius: var(--radius) !important;
}

html.sa-elera .bootstrap-switch .bootstrap-switch-handle-on,
html.sa-elera .bootstrap-switch .bootstrap-switch-handle-off,
html.sa-elera .bootstrap-switch .bootstrap-switch-label {
  border-radius: 0 !important;
  font-family: var(--font-family);
  font-size: 13px;
}

html.sa-elera .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
html.sa-elera .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
html.sa-elera .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
  background-color: var(--accent-fill) !important;
  border-color: var(--accent-fill) !important;
  color: #1F1F1F !important;
  font-weight: 500;
}

html.sa-elera .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background-color: var(--bg-muted) !important;
  color: var(--text-secondary) !important;
  font-weight: 500;
}

html.sa-elera .bootstrap-switch .bootstrap-switch-label {
  background: var(--bg-card) !important;
  color: var(--text-heading);
}

html.sa-elera .bootstrap-switch.bootstrap-switch-focused {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ============================================================
   Páginas de acceso: login, sign-up, mylogin, reset y reset-password
   ============================================================ */
html.sa-elera .login-page {
  background-color: var(--bg-app) !important;
}

html.sa-elera .login-box {
  background: var(--bg-card) !important;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* El JSP pone max-height:100% en línea al logo, que lo deja enorme */
html.sa-elera .login-box .login-logo img {
  max-height: 96px !important;
  width: auto;
}

/* JCB-301: solo en login.jsp el logo crece (clase login-logo-xl); las demás
   pantallas de acceso (sign-up, mylogin, reset, header admin) conservan 96px */
html.sa-elera .login-box .login-logo.login-logo-xl img {
  max-height: 180px !important;
  width: auto;
}

@media (max-width: 767px) {
  html.sa-elera .login-box .login-logo.login-logo-xl img {
    max-height: 110px !important;
  }
}

html.sa-elera .login-box-body > .row > .alert {
  margin: 12px 15px 0;
}

html.sa-elera .login-box-body,
html.sa-elera .login-box .box-body {
  background: transparent !important;
}

html.sa-elera .login-box-msg {
  font-family: var(--font-family);
  /* px: Bootstrap 3 fija html { font-size: 10px } */
  font-size: 22px !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

html.sa-elera .login-page label {
  color: var(--text-secondary);
  font-weight: 500;
}

html.sa-elera .login-page .form-control {
  height: 40px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius) !important;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: none;
}

html.sa-elera .login-page .login-box-body .form-control {
  height: auto;
}

html.sa-elera .login-page .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

html.sa-elera .login-page .form-control-feedback {
  color: var(--text-muted);
}

html.sa-elera .login-page .btn {
  min-height: 40px;
}

html.sa-elera .login-page a {
  color: var(--text-secondary);
}

html.sa-elera .login-page a:hover,
html.sa-elera .login-page a:focus {
  color: var(--text-heading);
}

html.sa-elera .login-page .alert {
  border: none;
  border-radius: var(--radius);
  background: var(--error-tint) !important;
  color: var(--banner-error-text) !important;
}

html.sa-elera .login-page .alert .close {
  color: var(--banner-error-text);
  opacity: 0.7;
}

html.sa-elera .login-footer {
  color: var(--text-muted) !important;
}

/* sign-up: tarjetas de paquete y pie del formulario */
html.sa-elera .paquete-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
}

html.sa-elera .paquete-card:hover {
  border-color: var(--btn-default-hover-border);
}

html.sa-elera .paquete-card.seleccionado {
  border-color: var(--accent);
  background-color: var(--accent-tint);
  box-shadow: 0 0 0 1px var(--accent);
}

html.sa-elera .paquete-card-precio {
  color: var(--text-heading);
  font-weight: 600;
}

html.sa-elera .paquete-card-periodo {
  color: var(--text-muted);
}

html.sa-elera .form-footer {
  border-top: none;
}

/* ============================================================
   Modo oscuro (html.dark.sa-elera)
   Este archivo carga después de sportapp-modern.css, así que los tokens
   de superficie y texto se repiten aquí para que el modo oscuro gane.
   Las reglas html.dark de sportapp-modern.css (tablas, dropdowns,
   modales, DataTables) leen estos tokens.
   ============================================================ */
html.dark.sa-elera {
  color-scheme: dark;

  --bg-app:          #1A1A19;
  --bg-primary:      #1A1A19;
  --bg-secondary:    #2A2A28;
  --bg-card:         #242423;
  --bg-sidebar:      #1A1A19;
  --bg-muted:        #33332F;

  --text-heading:    #F2F1EE;
  --text-primary:    #E4E3DF;
  --text-secondary:  #B8B6B1;
  --text-muted:      #9C9A95;

  --accent-fill:       #7ED473;
  --accent-fill-hover: #92DC88;
  --accent:            #5CC46B;
  --accent-hover:      #74CF81;
  --accent-active:     #8ADB80;
  --accent-tint:       rgba(126, 212, 115, 0.14);
  --accent-text:       #8ADB80;

  --btn-primary-bg:       #EDECE9;
  --btn-primary-bg-hover: #FFFFFF;
  --btn-primary-text:     #1F1F1F;

  --success-tint:    rgba(126, 212, 115, 0.14);
  --error-tint:      rgba(217, 58, 43, 0.20);
  --warning-tint:    rgba(242, 201, 76, 0.16);
  --info-tint:       rgba(96, 140, 230, 0.18);

  --border-color:    #363633;

  --btn-default-hover-bg:     #2E2E2C;
  --btn-default-hover-border: #4A4A46;
  --focus-ring:               rgba(92, 196, 107, 0.28);
  --banner-error-text:        #F4B4AC;
  --banner-error-icon:        #E0533F;
  --banner-help-bg:           rgba(242, 201, 76, 0.14);
  --banner-help-icon:         #F2C94C;

  --chart-total:     #8C8A85;
  --chart-paid:      #5CC46B;
  --chart-played:    #5CC46B;
  --chart-unplayed:  #EC6F5C;
  --chart-scheduled: #6F9BEA;

  --badge-warning-text: #F2C94C;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 14px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.40), 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* Ítem activo y botón verde: el verde claro lleva texto oscuro también en oscuro */
html.dark.sa-elera .sidebar-menu > li.active > a,
html.dark.sa-elera .sidebar-menu > li.active > a:hover,
html.dark.sa-elera .sidebar-menu > li.active > a > .fa,
html.dark.sa-elera .sidebar-menu > li.active > a > .ion,
html.dark.sa-elera .btn-success,
html.dark.sa-elera .btn-success:hover,
html.dark.sa-elera .btn-success:focus,
html.dark.sa-elera .btn-success:active {
  color: #1F1F1F !important;
}

html.dark.sa-elera .sidebar-menu > li.active .label,
html.dark.sa-elera .sidebar-menu > li.active .badge {
  color: #1F1F1F;
}

/* Logo del header: el JSP lo fija oscuro en línea */
html.dark.sa-elera .main-header .logo,
html.dark.sa-elera .main-header .logo * {
  color: var(--text-heading) !important;
}

/* Controles de formulario sobre superficies oscuras */
html.dark.sa-elera .form-control,
html.dark.sa-elera .input-group-addon,
html.dark.sa-elera select.form-control {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

html.dark.sa-elera .form-control::placeholder {
  color: var(--text-muted);
}

html.dark.sa-elera .modal-content,
html.dark.sa-elera .modal-header,
html.dark.sa-elera .modal-footer {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

html.dark.sa-elera .close {
  color: var(--text-primary);
  text-shadow: none;
}

/* Login: el logo es oscuro, así que su franja se queda clara */
html.dark.sa-elera .login-box .login-logo {
  background: #F4F3F1;
}

/* sign-up muestra el logo fuera de la card: pastilla clara */
html.dark.sa-elera .login-page > .login-logo {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  background: #F4F3F1;
}

/* --- Dropdowns de selección en modo oscuro --- */

/* Opciones nativas: Chrome y Firefox no heredan el color del select en la
   lista desplegable, así que se pintan igual que el control. */
html.dark.sa-elera select.form-control option,
html.dark.sa-elera select.form-control optgroup {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* fSelect (multiselects de roles y jugadores) trae blancos fijos en su hoja;
   sobre el fondo oscuro el texto heredado quedaba ilegible. */
html.dark.sa-elera .fs-label-wrap {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

html.dark.sa-elera .fs-arrow {
  border-top-color: var(--text-secondary);
}

html.dark.sa-elera .fs-dropdown {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}

html.dark.sa-elera .fs-dropdown .fs-options {
  background-color: var(--bg-card);
}

html.dark.sa-elera .fs-option,
html.dark.sa-elera .fs-search,
html.dark.sa-elera .fs-optgroup-label {
  border-bottom-color: var(--border-color);
}

html.dark.sa-elera .fs-option.hl {
  background-color: var(--bg-muted);
}

html.dark.sa-elera .fs-search input {
  background-color: transparent;
  color: var(--text-primary);
}

html.dark.sa-elera .fs-search input::placeholder {
  color: var(--text-muted);
}

/* Casilla sin marcar: cuadro oscuro con borde visible, no un cuadro blanco.
   La marcada conserva el verde del plugin, que da el contraste que necesita
   la palomita blanca. */
html.dark.sa-elera .fs-wrap.multiple .fs-option:not(.selected) .fs-checkbox i {
  background-color: var(--bg-secondary);
  border-color: var(--text-muted);
}

/* Listados administrativos: filas ligeras, identidad visible y acciones agrupadas. */
html.sa-elera #tabla-ligas, html.sa-elera #tabla-jugadores, html.sa-elera #tabla-partidos, html.sa-elera #table-partidos { border: 0; margin-bottom: 0; }
html.sa-elera #tabla-ligas > thead > tr > th, html.sa-elera #tabla-jugadores > thead > tr > th, html.sa-elera #tabla-partidos > thead > tr > th, html.sa-elera #table-partidos > thead > tr > th { border: 0; border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
html.sa-elera #tabla-ligas > tbody > tr > td, html.sa-elera #tabla-jugadores > tbody > tr > td, html.sa-elera #tabla-partidos > tbody > tr > td, html.sa-elera #table-partidos > tbody > tr > td { border: 0; border-bottom: 1px solid var(--border-color); background: transparent !important; color: var(--text-primary); padding: 12px 10px; vertical-align: middle; }
html.sa-elera #tabla-ligas > tbody > tr:last-child > td, html.sa-elera #tabla-jugadores > tbody > tr:last-child > td, html.sa-elera #tabla-partidos > tbody > tr:last-child > td, html.sa-elera #table-partidos > tbody > tr:last-child > td { border-bottom: 0; }
html.sa-elera .sa-listing-identity { align-items: center; display: flex; gap: 10px; min-width: 190px; }
html.sa-elera .sa-listing-identity strong { color: var(--text-heading); display: block; font-weight: 600; }
html.sa-elera .sa-listing-identity small, html.sa-elera .sa-listing-meta { color: var(--text-muted); display: block; font-size: 12px; margin-top: 2px; }
html.sa-elera .sa-listing-avatar { background: var(--accent-tint); border-radius: 50%; color: var(--accent-text); flex: 0 0 34px; height: 34px; object-fit: cover; overflow: hidden; width: 34px; }
html.sa-elera .sa-listing-avatar--initial { align-items: center; display: inline-flex; font-size: 14px; font-weight: 600; justify-content: center; }

/*
 * JCB-304: equipos del jugador en el listado de credenciales. Cada equipo es
 * un apilado de avatares circulares que se traslapan; al pasar el mouse por
 * uno, SOLO ese se expande y muestra su nombre (los demas quedan igual).
 * El ancho colapsado es el del avatar; el nombre vive dentro del propio
 * elemento, asi que no queda tapado por el avatar siguiente.
 *
 * El avatar son las iniciales del equipo (A, CA, DG), no el escudo: con
 * escudos del mismo tamano un jugador en varios equipos se lee como una fila
 * de circulos iguales. Al expandir, el circulo se apaga al color de la tarjeta
 * para que las iniciales y el nombre formen una sola pastilla.
 */
html.sa-elera .sa-team-stack { align-items: center; display: flex; }
html.sa-elera .sa-team-stack__item { align-items: center; background: transparent; border-radius: 999px; display: flex; margin-left: -10px; max-width: 30px; overflow: hidden; position: relative; transition: max-width .2s ease, background-color .2s ease; }
html.sa-elera .sa-team-stack__item:first-child { margin-left: 0; }
html.sa-elera .sa-team-stack__item:hover { background: var(--accent-tint); max-width: 320px; z-index: 5; }
html.sa-elera .sa-team-stack__item:hover .sa-team-stack__avatar { background: var(--bg-card); }
html.sa-elera .sa-team-stack__avatar { align-items: center; background: var(--accent-tint); border: 2px solid var(--bg-card); border-radius: 50%; color: var(--accent-text); display: inline-flex; flex: 0 0 30px; font-size: 11px; font-weight: 700; height: 30px; justify-content: center; overflow: hidden; width: 30px; }
html.sa-elera .sa-team-stack__name { color: var(--accent-text); flex: 0 0 auto; font-size: 12px; font-weight: 600; opacity: 0; padding: 0 7px 0 4px; transition: opacity .2s ease; white-space: nowrap; }
html.sa-elera .sa-team-stack__item:hover .sa-team-stack__name { opacity: 1; }
html.sa-elera .sa-listing-drag { color: var(--text-muted); cursor: move; }
html.sa-elera .sa-status-pill { border-radius: 999px; display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 9px; white-space: nowrap; }
html.sa-elera .sa-status-pill--success { background: var(--success-tint); color: var(--accent-text); }
html.sa-elera .sa-status-pill--muted { background: var(--bg-muted); color: var(--text-secondary); }
html.sa-elera .sa-listing-actions, html.sa-elera th.sa-listing-actions { text-align: right; white-space: nowrap; }
html.sa-elera .sa-listing-actions .btn, html.sa-elera #tabla-ligas td:nth-last-child(-n+3) .btn, html.sa-elera #tabla-jugadores td:last-child .btn { border-color: var(--border-color); color: var(--text-secondary); margin-left: 3px; }
html.sa-elera .sa-action-danger, html.sa-elera .sa-action-danger:hover, html.sa-elera .sa-action-danger:focus { color: var(--banner-error-icon) !important; }
html.sa-elera .dataTables_wrapper .dataTables_filter input, html.sa-elera .dataTables_wrapper .dataTables_length select { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-primary); min-height: 34px; }
html.sa-elera .dataTables_wrapper .dt-buttons .btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }
@media (max-width: 767px) { html.sa-elera #tabla-ligas > tbody > tr > td, html.sa-elera #tabla-jugadores > tbody > tr > td, html.sa-elera #tabla-partidos > tbody > tr > td, html.sa-elera #table-partidos > tbody > tr > td { padding: 10px 8px; } html.sa-elera .sa-listing-identity { min-width: 160px; } }

/* --- Sidebar móvil (JCB-303): cabecera con la marca y botón de cierre.
   Solo se muestra en el breakpoint móvil; en escritorio el sidebar queda igual.
   La cabecera viaja con el sidebar off-canvas, así que al cerrar queda fuera. --- */
html.sa-elera .sa-mobile-sidebar-header {
  display: none;
}

@media (max-width: 767px) {
  html.sa-elera .sa-mobile-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 50px;
    padding: 0 16px;
  }

  html.sa-elera .sa-mobile-sidebar-brand {
    display: block;
    min-width: 0;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-heading);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html.sa-elera .sa-mobile-sidebar-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
  }

  html.sa-elera .sa-mobile-sidebar-close:hover {
    background: var(--bg-secondary);
    color: var(--text-heading);
  }

  html.sa-elera .sa-mobile-sidebar-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

/* JCB-304: selector de color de las plantillas de credencial.
 *
 * El input[type=color] nativo pinta la muestra y el campo de texto lleva el
 * hexadecimal. La "x" del campo de texto devuelve el valor a vacio, que para
 * el backend significa "hereda", algo que un input[type=color] no puede
 * expresar porque siempre tiene un color. */
.sa-color .sa-color__addon {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
  cursor: pointer;
}

.sa-color .sa-color__addon input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 3px;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.sa-color .sa-color__addon input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.sa-color .sa-color__addon input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--border-color, #d2d6de);
  border-radius: 4px;
}

.sa-color .sa-color__addon input[type="color"]::-moz-color-swatch {
  border: 1px solid var(--border-color, #d2d6de);
  border-radius: 4px;
}

.sa-color .sa-color__vacio {
  position: absolute;
  top: -4px;
  right: -4px;
  display: none;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  background: var(--danger, #dd4b39);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}

/* Sin color propio: la muestra se apaga y aparece la "x" para volver a elegir. */
.sa-color--vacio .sa-color__addon input[type="color"] {
  opacity: 0.35;
}

.sa-color--vacio .sa-color__vacio {
  display: block;
}

.sa-color .sa-color__vacio:hover {
  background: var(--text-heading, #333);
}

/* JCB-304: vista previa de la credencial dentro del editor de plantillas.
 *
 * Los colores del fondo y del texto los aplica el JS como estilos en linea
 * desde los valores que elige el usuario, por eso aqui solo se define la
 * forma. La foto y el QR son de muestra: la plantilla se comparte con todos
 * los jugadores del cliente y aqui no se cargan los datos de ninguno.
 *
 * Dos variantes de acomodo (vertical/horizontal), la misma estructura que usa
 * la hoja de impresion (imprimir.jsp) para que la maqueta del editor no
 * mienta sobre el resultado. La imagen de fondo, si la plantilla trae una, se
 * dibuja en una capa absoluta detras del contenido. */
.sa-cred-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 320px;
  padding: 16px;
  border: 1px solid var(--border-color, #d2d6de);
  border-radius: var(--radius, 4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sa-cred-preview--vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sa-cred-preview--horizontal {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  max-width: 400px;
}

.sa-cred-preview__fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  z-index: 0;
}

.sa-cred-preview > :not(.sa-cred-preview__fondo) {
  position: relative;
  z-index: 1;
}

.sa-cred-preview__logo {
  display: block;
  max-height: 36px;
  max-width: 100%;
  object-fit: contain;
}

.sa-cred-preview--vertical .sa-cred-preview__logo {
  margin: 0 auto 10px;
  max-width: 70%;
}

.sa-cred-preview__logo--vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-bottom: 10px;
  border: 1px dashed currentColor;
  border-radius: 4px;
  opacity: 0.45;
  font-size: 16px;
}

.sa-cred-preview--horizontal .sa-cred-preview__logo--vacio {
  margin-bottom: 0;
  width: 36px;
}

.sa-cred-preview__foto-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  background: rgba(127, 127, 127, 0.25);
  font-size: 32px;
}

.sa-cred-preview--horizontal .sa-cred-preview__foto-grande {
  width: 110px;
  flex: 0 0 auto;
}

.sa-cred-preview__info {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
}

.sa-cred-preview__fila-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sa-cred-preview__nombre {
  margin-top: 10px;
  overflow: hidden;
  font-size: 1em;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-cred-preview__subtitulo {
  overflow: hidden;
  /* Proporcionado al tamano de letra que se elige, igual que la credencial. */
  font-size: 0.8em;
  opacity: 0.85;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-cred-preview__qr {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 6px;
  border-radius: 3px;
  background: rgba(127, 127, 127, 0.25);
  font-size: 22px;
}

.sa-cred-preview--horizontal .sa-cred-preview__qr {
  margin-top: 0;
}

/* JCB-304: vista previa (formulario principal) cuando la plantilla tiene un
 * acomodo de grid personalizado. Reusa las mismas clases de contenido
 * (__logo, __foto-grande, __nombre, __subtitulo, __qr) dentro de celdas de
 * grid en vez de un flujo flex; ver tambien .sa-print-card__grid en
 * imprimir.jsp, que sigue la misma idea para la hoja impresa. */
.sa-cred-preview--grid {
  display: block;
  padding: 0;
  overflow: hidden;
  /* El grid vertical es de 1:2 (8x16), asi que con el max-width de 320px de
   * .sa-cred-preview la vista previa llegaba a 640px de alto y empujaba el
   * resto del formulario. 220px la deja en 440px, proporcion de placa. */
  max-width: 220px;
}

.sa-cred-preview__grid {
  display: grid;
  width: 100%;
}

.sa-cred-preview__grid .sa-cred-preview__celda {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
  box-sizing: border-box;
}

.sa-cred-preview__grid .sa-cred-preview__logo,
.sa-cred-preview__grid .sa-cred-preview__foto-grande {
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.sa-cred-preview__grid .sa-cred-preview__nombre,
.sa-cred-preview__grid .sa-cred-preview__subtitulo {
  margin-top: 0;
  white-space: normal;
}

.sa-cred-preview__grid .sa-cred-preview__qr {
  margin-top: 0;
}

/* JCB-304: la credencial como se imprime (.sa-print-card*), que es la misma
 * que pinta tarjeta.jsp. Vive aqui y no en la hoja de impresion porque la
 * vista previa del editor la muestra dentro del admin: si el render viviera
 * en la pagina que imprime, la vista previa tendria su propia copia y
 * cualquier cambio a una dejaria a la otra desactualizada (ya paso: la copia
 * de la hoja pedia los assets con una ruta que daba 404 y no se veia ni la
 * foto ni el fondo). Las clases se llaman sa-print-* porque describen la
 * credencial impresa, no porque solo se usen al imprimir. */
.sa-print-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid #d2d6de;
  border-radius: 4px;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Dos layouts fijos (vertical/horizontal) que decide la plantilla, no el
 * usuario al imprimir. La imagen de fondo (si la plantilla trae una) va en
 * una capa absoluta detras del contenido para que el color de "fondo" siga
 * sirviendo de respaldo cuando no hay imagen o mientras carga. */
.sa-print-card--vertical {
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sa-print-card--horizontal {
  width: 400px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
}
.sa-print-card__fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  z-index: 0;
}
.sa-print-card > :not(.sa-print-card__fondo) {
  position: relative;
  z-index: 1;
}
.sa-print-card__logo {
  display: block;
  max-height: 36px;
  max-width: 100%;
  object-fit: contain;
}
.sa-print-card--vertical .sa-print-card__logo {
  margin: 0 auto 10px;
  max-width: 70%;
}
.sa-print-card__foto-grande {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  object-fit: cover;
  background: rgba(127, 127, 127, 0.25);
}

/* La foto por defecto es un icono cuadrado, no una foto 3:4: con el
 * object-fit: cover de una foto de verdad se cortaria. Con contain se ve
 * entero, y atenuado para que no compita con el nombre ni con el codigo. */
.sa-print-card__foto-default {
  object-fit: contain;
  padding: 10%;
  background: transparent;
  opacity: 0.45;
}
.sa-print-card--horizontal .sa-print-card__foto-grande {
  width: 140px;
  flex: 0 0 auto;
}
.sa-print-card__info {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
}
.sa-print-card--horizontal .sa-print-card__info {
  justify-content: space-between;
}
.sa-print-card--horizontal .sa-print-card__fila-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.sa-print-card__nombre {
  margin-top: 10px;
  /* 1em = el tamano que la plantilla dejo. Los textos de abajo salen
   * proporcionados a ese, asi que cambiar el tamano mueve toda la credencial
   * y no solo el nombre. */
  font-size: 1em;
  font-weight: 600;
  word-break: break-word;
}
.sa-print-card__subtitulo {
  font-size: 0.8em;
  opacity: 0.85;
}
.sa-print-card__meta {
  margin-top: 6px;
  font-size: 0.73em;
  opacity: 0.75;
}
/* El codigo QR o de barras de la credencial. Va sobre fondo claro y con margen
 * al rededor: un codigo pegado al borde no lo lee ni el mejor lector. El ancho
 * y el alto se fijan para que no se deforme al estirarse, e image-rendering
 * pixelated evita que el navegador lo suavice al imprimir. */
.sa-print-card__codigo {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 6px;
  image-rendering: pixelated;
  background: #fff;
  padding: 3px;
  border-radius: 3px;
}

.sa-print-card--horizontal .sa-print-card__codigo {
  margin: 0 0 6px;
}

.sa-print-card__token {
  margin-top: 10px;
  padding: 6px 8px;
  border: 1px dashed currentColor;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.73em;
  word-break: break-all;
  opacity: 0.85;
}
.sa-print-card--horizontal .sa-print-card__token {
  margin-top: 0;
  align-self: flex-start;
}
.sa-print-pendiente {
  margin-bottom: 6px;
  font-size: 12px;
  opacity: 0.8;
}

/* Acomodo personalizado (grid fijo por elemento). Es un modo aparte de
 * vertical/horizontal (clases propias, no las reusa) para no heredar el
 * display:flex de esas dos y tener que pelear la cascada. El grid en si va
 * en un div anidado (.sa-print-card__grid) para que la fila de "meta"
 * (plantilla / emitida) quede fuera del grid: no es uno de los 5 elementos
 * que el admin puede reacomodar. El ancho va de la mano con la forma del
 * grid: en vertical 8x16 es de 1:2, asi que a 260px la tarjeta salia de
 * 520px de alto (mas alta que el resto de la hoja y que una credencial
 * real). 200px la deja en 400px de alto, proporcion de placa. En horizontal
 * 16x8 es de 2:1 y los 400px de ancho dan 200px de alto. */
.sa-print-card--grid-vertical {
  width: 200px;
}
.sa-print-card--grid-horizontal {
  width: 400px;
}
.sa-print-card__grid {
  display: grid;
  width: 100%;
}
.sa-print-card__celda {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 2px;
  box-sizing: border-box;
}
.sa-print-card__celda .sa-print-card__logo,
.sa-print-card__celda .sa-print-card__foto-grande {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}
.sa-print-card__celda .sa-print-card__nombre,
.sa-print-card__celda .sa-print-card__subtitulo {
  margin-top: 0;
}
.sa-print-card__celda .sa-print-card__token {
  margin-top: 0;
}

/* La vista previa del editor (JCB-304, cambio 4) envuelve la misma tarjeta
 * que se imprime, con un fondo de tabla para que se lea como una hoja y no
 * como un elemento suelto del formulario. */
.sa-cred-preview-panel {
  padding: 14px;
  border: 1px dashed #c6cbd4;
  border-radius: 6px;
  background: #f7f8fa;
  text-align: center;
}
.sa-cred-preview-panel .sa-print-card {
  display: inline-flex;
  margin: 0 auto;
  text-align: left;
}
.sa-cred-preview-panel .sa-print-card--vertical {
  text-align: center;
}

/* JCB-304: editor interactivo del acomodo, dentro del modal "Personalizar
 * layout". Los elementos se posicionan con left/top/width/height en pixeles
 * (jQuery UI draggable/resizable trabajan en pixeles) sobre un fondo de
 * lineas que marca las celdas; el JS convierte esos pixeles a fila/columna
 * del grid al soltar. */
.sa-layout-grid {
  position: relative;
  margin: 8px auto;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
  background-color: rgba(127, 127, 127, 0.06);
  border: 1px solid var(--border-color, #d2d6de);
}

.sa-grid-elemento {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(51, 122, 183, 0.6);
  border-radius: 3px;
  background: rgba(51, 122, 183, 0.18);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  cursor: move;
  user-select: none;
  box-sizing: border-box;
  padding: 2px;
}

/* JCB-304: columna de seleccion para la impresion de credenciales.
 *
 * Va centrada y con ancho fijo para que las casillas no se mueven de lugar al
 * marcar y desmarcar, que es lo que hace incomoda una hoja de seleccion. */
.sa-print-col {
  width: 34px;
  text-align: center;
  vertical-align: middle;
}

.sa-print-col input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

#cred-imprimir .sa-print-total {
  margin-left: 4px;
  background: #3c8dbc;
  color: #fff;
}

/* JCB-304: panel de edicion de credenciales por link temporal.
 *
 * Es una pagina publica, sin barra de navegacion ni menu, pero con los mismos
 * colores del resto del sistema para que no parezca otra aplicacion. */
/* 800px, no 340px: la tabla del panel tiene cuatro columnas y a 340 quedaria
 * ilegible. Ojo con el selector de abajo: sportapp-modern.css pone
 * .login-page .login-box a 700px para los formularios de registro, y eso son dos
 * clases de especificidad, mas que un .sa-cred-link__box suelto. Por eso el
 * panel repite el selector con .login-page: sin eso el ancho sale 700 y no el
 * que se pidio. */
.sa-cred-link__box {
  width: 100%;
  max-width: 800px;
}

.login-page .sa-cred-link__box {
  max-width: 800px;
}

/* Encabezado del panel: el logo a la izquierda y el nombre de la liga a su
 * lado, centrado verticalmente con el. No se usa .login-logo porque ese centra
 * todo y ademas tiene un alto fijo que aqui no sirve. */
.sa-cred-link__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #e3e6ea;
}

.sa-cred-link__header .sa-cred-link__logo {
  max-height: 56px;
  max-width: 170px;
  width: auto;
}

.sa-cred-link__liga {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.sa-cred-link__acciones-todo {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sa-cred-link__todo-estado {
  font-size: 12px;
  color: #777;
}

.sa-cred-link__titulo {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}

.sa-cred-link__aviso {
  margin-bottom: 16px;
  text-align: center;
}

.sa-cred-link__nota {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 12px;
  text-align: center;
}

.sa-cred-link__intro {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.sa-cred-link__tabla {
  margin-bottom: 8px;
}

/* En una tabla el contenido se alinea arriba: centrado, un nombre de jugador
 * largo empuja la foto y los botones fuera de su propia fila. */
.sa-cred-link__fila > td {
  vertical-align: top;
}

.sa-cred-link__nombre-jugador {
  font-weight: 600;
}

.sa-cred-link__estado {
  margin-top: 4px;
}

.sa-cred-link__nombre {
  min-width: 180px;
}

.sa-cred-link__col-foto,
.sa-cred-link__foto {
  width: 110px;
}

.sa-cred-link__foto {
  min-height: 60px;
  text-align: center;
}

.sa-cred-link__foto img {
  max-height: 90px;
  max-width: 100%;
  border-radius: 4px;
}

/* La foto recien subida, todavia sin guardar: sale del archivo que esta en
 * memoria del navegador, con las mismas medidas que una foto real para que no
 * salte el alto de la celda al guardar. */
.sa-cred-link__foto-local {
  max-height: 70px;
  max-width: 100%;
}

/* La foto por defecto del panel, la misma que usa la credencial impresa.
 * El contenedor mide 60px de alto y la imagen entra completa. */
.sa-cred-link__foto-defecto {
  max-height: 70px;
  max-width: 100%;
  opacity: 0.45;
}

/* "Cambiar foto" es una etiqueta con el input de archivo encima, tapado. El
 * input no se puede eliminar —es el unico que abre el explorador— pero si puede
 * dejar de ser un control aparte: transparente y del tamaño del boton, encima
 * de el. Por eso NO es display:none: asi sigue siendo alcanzable con el teclado
 * y lo anuncia un lector de pantalla. */
.sa-cred-link__cambiar {
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 4px;
}

.sa-cred-link__archivo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.sa-cred-link__botones {
  white-space: nowrap;
}

.sa-cred-link__botones .btn {
  margin-bottom: 4px;
}

/* Los mensajes van debajo de los botones y no a un lado: en una celda de tabla,
 * al lado harian crecer la columna y descuadrar la tabla entera. */
.sa-cred-link__mensajes {
  font-size: 12px;
}

.sa-cred-link__guardado {
  color: #3c763d;
}

.sa-cred-link__error {
  color: #a94442;
}

.sa-cred-link__vacio td {
  padding: 24px;
  text-align: center;
  color: #777;
}

.sa-cred-link__pie {
  margin-top: 16px;
  font-size: 12px;
  color: #777;
}

/* En pantalla chica la tabla se desplaza en horizontal —.table-responsive de
 * Bootstrap— y las celdas no se apilan: apilarlas seria volver a las tarjetas
 * que se querian quitar. Lo que si se ajusta es el ancho del nombre, que es la
 * unica columna que crece. */
@media (max-width: 480px) {
  .sa-cred-link__nombre {
    min-width: 140px;
  }
}