/* ==========================================================================
   MitreBack — capa de identidad sobre el tema Sneat
   Club Ferro Carril Mitre · hockey

   Se carga DESPUÉS del core y del tema, y solo sobreescribe tokens:
   color de marca, tipografía, densidad de tablas y estados operativos.
   No reemplaza al tema ni recompila su SCSS.
   ========================================================================== */

:root {
  /* Marca */
  --mitre-azul: #1B1FA5;
  --mitre-azul-oscuro: #141889;
  --mitre-azul-claro: #2A2FBE;
  --mitre-azul-tenue: #E8E9F8;

  /* Estados operativos */
  --mitre-deuda: #C42B2B;
  --mitre-deuda-fondo: #FDECEC;
  --mitre-cobrado: #0E7A4D;
  --mitre-cobrado-fondo: #E7F5EE;
  --mitre-alerta: #A35A00;
  --mitre-alerta-fondo: #FDF2E2;

  /* Neutros */
  --mitre-fondo: #F4F5F9;
  --mitre-borde: #DDE0EA;
  --mitre-borde-input: #C6CBDA;
  --mitre-texto: #141A2E;
  --mitre-texto-2: #5A6180;

  /* Tipografía */
  --mitre-fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mitre-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Bootstrap */
  --bs-primary: #1B1FA5;
  --bs-primary-rgb: 27, 31, 165;
  --bs-body-font-family: var(--mitre-fuente);
  --bs-font-sans-serif: var(--mitre-fuente);
  --bs-font-monospace: var(--mitre-mono);
}

/* --------------------------------------------------------------------------
   1. Tipografía
   -------------------------------------------------------------------------- */

body,
.menu,
.card,
.modal,
.dropdown-menu,
.btn,
.form-control,
.form-select,
input,
select,
textarea,
table {
  font-family: var(--mitre-fuente);
}

body {
  color: var(--mitre-texto);
  background-color: var(--mitre-fondo);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--mitre-fuente);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mitre-texto);
}

/* Toda cifra va en ancho fijo y alineada a la derecha: en una columna de
   saldos las unidades quedan una debajo de otra y el error se ve sin leer. */
.cifra,
td.cifra,
.dataTable td.text-end,
.dataTable td.cifra {
  font-family: var(--mitre-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.cifra-deuda { color: var(--mitre-deuda); font-weight: 600; }
.cifra-cobrada { color: var(--mitre-cobrado); font-weight: 600; }
.cifra-fuerte { font-weight: 700; font-size: 1.05em; }

.mono { font-family: var(--mitre-mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   2. Color de marca
   -------------------------------------------------------------------------- */

a { color: var(--mitre-azul); }
a:hover { color: var(--mitre-azul-oscuro); }

.text-primary { color: var(--mitre-azul) !important; }
.bg-primary { background-color: var(--mitre-azul) !important; }
.border-primary { border-color: var(--mitre-azul) !important; }

.btn-primary {
  background-color: var(--mitre-azul);
  border-color: var(--mitre-azul);
  color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:first-child:active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--mitre-azul-oscuro) !important;
  border-color: var(--mitre-azul-oscuro) !important;
  color: #FFFFFF !important;
}
.btn-primary:focus,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(27, 31, 165, 0.25) !important;
}

.btn-outline-primary,
.btn-label-primary {
  color: var(--mitre-azul);
  border-color: var(--mitre-azul);
}
.btn-label-primary { background-color: var(--mitre-azul-tenue); border-color: transparent; }
.btn-outline-primary:hover,
.btn-label-primary:hover {
  background-color: var(--mitre-azul) !important;
  border-color: var(--mitre-azul) !important;
  color: #FFFFFF !important;
}

.form-check-input:checked {
  background-color: var(--mitre-azul);
  border-color: var(--mitre-azul);
}
.form-check-input:focus { border-color: var(--mitre-azul); box-shadow: 0 0 0 0.2rem rgba(27, 31, 165, 0.2); }

.page-item.active .page-link,
.pagination .page-item.active .page-link {
  background-color: var(--mitre-azul);
  border-color: var(--mitre-azul);
  color: #FFFFFF;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  color: var(--mitre-azul);
  border-color: var(--mitre-azul);
}
.nav-pills .nav-link.active { background-color: var(--mitre-azul); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   3. Barra lateral — el azul del escudo es estructura, no fondo
   -------------------------------------------------------------------------- */

.bg-menu-theme,
.layout-menu.bg-menu-theme {
  background-color: var(--mitre-azul-oscuro) !important;
}

.bg-menu-theme .app-brand-text,
.bg-menu-theme .menu-header-text {
  color: #FFFFFF;
}
.bg-menu-theme .menu-header-text {
  color: #7E85DC;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.bg-menu-theme .menu-inner > .menu-item > .menu-link,
.bg-menu-theme .menu-inner .menu-sub > .menu-item > .menu-link {
  color: #C9CDF4;
}

.bg-menu-theme .menu-inner .menu-item:not(.active) > .menu-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.bg-menu-theme .menu-inner .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--mitre-azul-claro) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  border-left: 3px solid #FFFFFF;
}

/* El submenu abierto se oscurece dentro de la familia del azul, no en gris. */
.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle,
.bg-menu-theme .menu-inner .menu-sub {
  background-color: rgba(0, 0, 0, 0.18) !important;
}
.bg-menu-theme .menu-inner .menu-sub .menu-link { color: #B9BDF0; }
.bg-menu-theme .menu-inner .menu-sub .menu-item.active > .menu-link {
  color: #FFFFFF !important;
  font-weight: 600;
}

.bg-menu-theme .menu-divider { border-color: #2D32A8; }

/* El tema (demo.css) trae el contenedor en 30px; se agranda a 52px
   para que el escudo del sidebar se vea del mismo tamaño que el del
   login, en vez de quedar chico y apretado. */
.app-brand-logo.demo { width: 52px; height: 52px; }
.app-brand-logo img,
.app-brand-logo.demo img { width: 52px; height: 52px; }

/* --------------------------------------------------------------------------
   4. Densidad — se usa de pie en el mostrador, con gente esperando
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--mitre-borde);
  border-radius: 9px;
  box-shadow: none;
}
.card-header { border-bottom: 1px solid #EDEFF4; font-weight: 700; }

.table {
  --bs-table-hover-bg: #F7F8FE;
  font-size: 0.82rem;
}

.table > thead > tr > th,
table.dataTable > thead > tr > th {
  background-color: var(--mitre-fondo);
  border-bottom: 1px solid var(--mitre-borde);
  color: var(--mitre-texto-2);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  white-space: nowrap;
}

.table > tbody > tr > td,
table.dataTable > tbody > tr > td {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid #EDEFF4;
  vertical-align: middle;
}

/* La fila impaga no se pinta entera: con 40 vencidas la pantalla se vuelve
   una mancha y se pierde el orden de prioridad. Solo el monto y el estado. */
tr.fila-deuda > td { background-color: transparent; }

/* --------------------------------------------------------------------------
   5. Formularios
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
  border-color: var(--mitre-borde-input);
  border-radius: 7px;
  color: var(--mitre-texto);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--mitre-azul);
  box-shadow: 0 0 0 0.15rem rgba(27, 31, 165, 0.18);
}
.form-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mitre-texto-2);
}

/* Select2 alineado al resto de los campos */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--mitre-borde-input);
  border-radius: 7px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--mitre-azul);
}

/* Monto principal de una pantalla de cobro */
.input-monto {
  font-family: var(--mitre-mono);
  font-size: 1.75rem;
  font-weight: 600;
  text-align: right;
  height: 62px;
  border-width: 2px;
  border-color: var(--mitre-azul);
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   6. Estados
   -------------------------------------------------------------------------- */

.estado {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
.estado-impaga   { color: var(--mitre-deuda);    background: var(--mitre-deuda-fondo); }
.estado-pagada   { color: var(--mitre-cobrado);  background: var(--mitre-cobrado-fondo); }
.estado-bonificada { color: var(--mitre-azul);   background: var(--mitre-azul-tenue); }
.estado-anulada  { color: var(--mitre-texto-2);  background: #EDEFF4; }
.estado-alerta   { color: var(--mitre-alerta);   background: var(--mitre-alerta-fondo); }

.badge.bg-label-primary { background-color: var(--mitre-azul-tenue) !important; color: var(--mitre-azul) !important; }
.badge.bg-label-success { background-color: var(--mitre-cobrado-fondo) !important; color: var(--mitre-cobrado) !important; }
.badge.bg-label-danger  { background-color: var(--mitre-deuda-fondo) !important; color: var(--mitre-deuda) !important; }
.badge.bg-label-warning { background-color: var(--mitre-alerta-fondo) !important; color: var(--mitre-alerta) !important; }

/* --------------------------------------------------------------------------
   7. Ingreso
   -------------------------------------------------------------------------- */

.authentication-wrapper .authentication-inner .card {
  border-radius: 10px;
  border: 1px solid var(--mitre-borde);
}
.authentication-wrapper .app-brand-logo img,
.authentication-wrapper .app-brand-logo svg { width: 52px; height: 52px; }

/* El tema decora el ingreso con manchas violetas que no son del club. */
.authentication-wrapper.authentication-basic .authentication-inner::before,
.authentication-wrapper.authentication-basic .authentication-inner::after {
  display: none !important;
  content: none !important;
}

/* Fondo del ingreso: el azul del escudo, con el sol apenas insinuado. */
.authentication-wrapper.authentication-basic {
  background-color: var(--mitre-azul-oscuro);
  position: relative;
  overflow: hidden;
}
.authentication-wrapper.authentication-basic > .authentication-inner { position: relative; z-index: 1; }
.authentication-wrapper.authentication-basic::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -190px;
  width: 660px;
  height: 660px;
  transform: translateY(-50%);
  background: url('../../images/marca-blanca.svg') no-repeat center / contain;
  opacity: 0.09;
  pointer-events: none;
}