/* ==========================================================================
   KILOMBO RP — Capa de marca sobre Metronic
   El bundle de Metronic (style.bundle.css, 1.2 MB) NO se toca: se reescriben
   sus variables --bs-* para que apunten a los tokens del logo.
   Cargar SIEMPRE despues de style.bundle.css y despues de kilombo-brand.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tema oscuro — el que usa el panel
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  /* Superficies: del gris azulado #151521 al violeta-negro del logo */
  --bs-page-bg:            var(--k-night);
  --bs-body-bg:            var(--k-abyss);
  --bs-app-blank-bg:       var(--k-night);
  --bs-body-color:         var(--k-text);
  --bs-body-color-rgb:     237, 228, 245;
  --bs-heading-color:      var(--k-text);
  --bs-border-color:       rgba(var(--k-pink-rgb), .16);
  --bs-card-bg:            var(--k-surface-solid);
  --bs-input-bg:           rgba(var(--k-night-rgb), .65);
  --bs-input-border-color: rgba(var(--k-pink-rgb), .22);
  --bs-text-muted:         var(--k-text-dim);

  /* Rampa de grises reteñida al violeta: Metronic la usa en todos lados
     (bordes, hovers, separadores), asi que dejarla azulada delataba el tema viejo */
  --bs-gray-100: #150A22;  --bs-gray-100-rgb: 21, 10, 34;
  --bs-gray-200: #221034;  --bs-gray-200-rgb: 34, 16, 52;
  --bs-gray-300: #2E1545;  --bs-gray-300-rgb: 46, 21, 69;
  --bs-gray-400: #452063;  --bs-gray-400-rgb: 69, 32, 99;
  --bs-gray-500: #6B4A82;  --bs-gray-500-rgb: 107, 74, 130;
  --bs-gray-600: #8B7B9E;  --bs-gray-600-rgb: 139, 123, 158;
  --bs-gray-700: #B9A8C9;  --bs-gray-700-rgb: 185, 168, 201;
  --bs-gray-800: #DACFE6;  --bs-gray-800-rgb: 218, 207, 230;
  --bs-gray-900: #EDE4F5;  --bs-gray-900-rgb: 237, 228, 245;
  --bs-light:      #221034;  --bs-light-rgb: 34, 16, 52;
  --bs-secondary:  #2E1545;  --bs-secondary-rgb: 46, 21, 69;
  --bs-secondary-active: #452063;
  --bs-secondary-light:  #150A22;
  --bs-secondary-inverse: var(--k-text-muted);
  --bs-text-secondary: #2E1545;
  --bs-dark:     #EDE4F5;  --bs-dark-rgb: 237, 228, 245;

  /* Primario: el magenta del logo reemplaza al celeste #009ef7 de Metronic */
  --bs-primary:         var(--k-accent);
  --bs-primary-rgb:     224, 53, 211;
  --bs-primary-active:  var(--k-hot);
  --bs-primary-light:   #2A0F3D;
  --bs-primary-inverse: #ffffff;
  --bs-text-primary:    var(--k-accent-text);
  --bs-component-active-bg: var(--k-accent);

  --bs-info:         var(--k-violet);
  --bs-info-rgb:     170, 23, 232;
  --bs-info-active:  var(--k-violet-lt);
  --bs-info-light:   #26113B;
  --bs-info-inverse: #ffffff;
  --bs-text-info:    var(--k-violet-lt);

  --bs-success:         var(--k-success);
  --bs-success-rgb:     52, 217, 160;
  --bs-success-active:  #2AC08C;
  --bs-success-light:   #102E2B;
  --bs-success-inverse: #06120F;
  --bs-text-success:    var(--k-success);

  --bs-warning:         var(--k-warning);
  --bs-warning-rgb:     252, 156, 144;
  --bs-warning-active:  #FFB4A2;
  --bs-warning-light:   #33191E;
  --bs-warning-inverse: #26100C;
  --bs-text-warning:    var(--k-warning);

  --bs-danger:         var(--k-danger);
  --bs-danger-rgb:     255, 77, 109;
  --bs-danger-active:  #E63356;
  --bs-danger-light:   #35131F;
  --bs-danger-inverse: #ffffff;
  --bs-text-danger:    var(--k-danger);

  --bs-link-color:            var(--k-accent-text);
  --bs-link-color-rgb:        252, 84, 228;
  --bs-link-hover-color:      var(--k-peach);
  --bs-link-hover-color-rgb:  252, 156, 144;

  /* Cabecera del panel (leaderboard, liga, mafias, fixture) */
  --bs-header-bg-color:              var(--k-void);
  --bs-header-navs-bg-color:         var(--k-abyss);
  --bs-header-navs-tab-color-active: var(--k-accent-text);
  --bs-header-navs-tab-color-hover:  var(--k-text);
  --bs-header-navs-tab-color-default: var(--k-text-muted);
  --bs-header-box-shadow:            0 10px 30px rgba(7, 3, 12, .45);
}

/* --------------------------------------------------------------------------
   Tema claro — algunas paginas del panel (liga, mafias, account/*) lo usan.
   Se apunta a [data-bs-theme=light] ademas de :root porque Metronic define ahi
   sus valores claros: mismo peso de selector, y asi no depende del orden.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary:         #A8129F;
  --bs-primary-rgb:     168, 18, 159;
  --bs-primary-active:  #8E0F87;
  --bs-primary-light:   #FDF2FC;
  --bs-primary-inverse: #ffffff;
  --bs-text-primary:    #A8129F;
  --bs-component-active-bg: #A8129F;

  --bs-info:         #7A15B8;
  --bs-info-rgb:     122, 21, 184;
  --bs-info-active:  #66109B;
  --bs-info-light:   #F7F0FE;
  --bs-text-info:    #7A15B8;

  --bs-link-color:           #A8129F;
  --bs-link-color-rgb:       168, 18, 159;
  --bs-link-hover-color:     #7A15B8;
  --bs-link-hover-color-rgb: 122, 21, 184;

  --bs-page-bg: #F7F2FB;
  --bs-border-color: #E7DCEF;
  --bs-gray-100: #FAF6FC;
  --bs-gray-200: #F2EAF6;
  --bs-gray-300: #E4D8EC;
  --bs-light: #FAF6FC;

  /* La cabecera del panel venia en el celeste #009ef7 de Metronic. Aun en tema
     claro va oscura: es la franja donde vive el logo, y el logo es neon sobre
     noche. Asi la marca se lee igual en los dos temas. */
  --bs-header-bg-color:              #180B26;
  --bs-header-navs-bg-color:         #ffffff;
  --bs-header-navs-tab-color-active: #A8129F;
  --bs-header-navs-tab-color-hover:  #ffffff;
  --bs-header-navs-tab-color-default: #E3C9E8;
  --bs-header-box-shadow:            0 10px 30px rgba(36, 16, 44, .12);
}

/* --------------------------------------------------------------------------
   Fondo del panel: el mismo halo de la web publica, mucho mas contenido para
   no competir con tablas y formularios.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] body {
  background-color: var(--k-night);
  background-image:
    radial-gradient(100% 60% at 50% 0%, rgba(var(--k-violet-rgb), .13) 0%, transparent 60%),
    radial-gradient(90% 55% at 100% 100%, rgba(var(--k-pink-rgb), .10) 0%, transparent 62%);
  background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   Retoques puntuales: Metronic hornea algunos colores fuera de variables.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] .app-sidebar,
[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] .app-footer {
  background-color: rgba(var(--k-night-rgb), .92) !important;
  border-color: rgba(var(--k-pink-rgb), .14) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-bs-theme="dark"] .card {
  border: 1px solid rgba(var(--k-pink-rgb), .14);
  background-color: var(--k-surface-solid);
  box-shadow: var(--k-shadow-sm);
}

[data-bs-theme="dark"] .menu-item .menu-link.active,
[data-bs-theme="dark"] .menu-item.here > .menu-link {
  background-color: rgba(var(--k-pink-rgb), .14) !important;
  color: var(--k-accent-text) !important;
}
[data-bs-theme="dark"] .menu-item .menu-link:hover {
  background-color: rgba(var(--k-pink-rgb), .08) !important;
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
  border-bottom-color: rgba(var(--k-pink-rgb), .10);
}
[data-bs-theme="dark"] .table-row-dashed > :not(caption) > * > * {
  border-bottom-color: rgba(var(--k-pink-rgb), .14);
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(var(--k-pink-rgb), .06);
  --bs-table-bg-state: rgba(var(--k-pink-rgb), .06);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: rgba(var(--k-night-rgb), .6);
  border-color: rgba(var(--k-pink-rgb), .20);
  color: var(--k-text);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: var(--k-accent);
  box-shadow: 0 0 0 3px rgba(var(--k-pink-rgb), .18);
}

[data-bs-theme="dark"] .btn.btn-primary {
  background: var(--k-grad-brand);
  border-color: transparent;
  color: #fff;
}
[data-bs-theme="dark"] .btn.btn-primary:hover,
[data-bs-theme="dark"] .btn.btn-primary:focus,
[data-bs-theme="dark"] .btn.btn-primary:active {
  background: var(--k-grad-warm);
  border-color: transparent;
  color: var(--k-text-invert);
}

[data-bs-theme="dark"] .separator { border-bottom-color: rgba(var(--k-pink-rgb), .14); }

/* DataTables / paginacion */
[data-bs-theme="dark"] .page-link:hover { background-color: rgba(var(--k-pink-rgb), .12); }
[data-bs-theme="dark"] .page-item.active .page-link {
  background: var(--k-grad-brand);
  border-color: transparent;
  color: #fff;
}