.app-bg-layer{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--bg-image, url("../images/bg-01.jpg")) center / cover no-repeat;
  opacity: .70; /* transparencia */
  filter: grayscale(10%) contrast(1.05);
}

.app-bg::before{
  opacity: .90;
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 15% 10%, color-mix(in srgb, var(--brand-accent) 18%, transparent) 0%, transparent 55%),
    radial-gradient(900px 500px at 85% 0%,  color-mix(in srgb, var(--brand-primary) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--brand-bg) 100%);
}

.app-bg{
  position: relative;
  min-height: 100vh;
  background: transparent;
  color: var(--brand-text);
}

/* Ingesoft Empresas - app.css */
.app-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.app-logo{ width: 180px; height: auto; }
.app-title{ font-weight: 700; letter-spacing: .2px; line-height: 1.1; }
.app-subtitle{ font-size: .9rem; color: rgba(15,23,42,.65); }

.app-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}

.app-badge{ font-weight: 600; }
.app-kpi{
  border-radius: .85rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.75);
}

.btn-brand{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 88%, #000 12%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary) 88%, #000 12%);
  --bs-btn-focus-shadow-rgb: 11, 46, 89;
}

.btn-accent{
  --bs-btn-color: #0b1320;
  --bs-btn-bg: color-mix(in srgb, var(--brand-accent) 22%, #fff 78%);
  --bs-btn-border-color: color-mix(in srgb, var(--brand-accent) 38%, #fff 62%);
  --bs-btn-hover-color: #0b1320;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-accent) 30%, #fff 70%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-accent) 46%, #fff 54%);
}

.form-control:focus{
  border-color: color-mix(in srgb, var(--brand-accent) 55%, #fff 45%);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-accent) 22%, transparent);
}