/* SaaS shell for BaluFacturacion */
:root {
  --bf-blue-900: #0f4fc7;
  --bf-blue-700: #1d68e5;
  --bf-blue-500: #4f8ff7;
  --bf-blue-100: #edf4ff;
  --bf-surface: #ffffff;
  --bf-muted: #6b7a90;
  --bf-text: #12213a;
  --bf-border: rgba(18, 33, 58, 0.08);
  --bf-shadow: 0 18px 50px rgba(9, 34, 84, 0.12);
  --bf-shadow-soft: 0 10px 28px rgba(9, 34, 84, 0.08);
  --bf-radius-lg: 26px;
  --bf-radius-md: 18px;
  --bf-radius-sm: 12px;
}

html, body {
  background: #f4f7fb;
  color: var(--bf-text);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

a {
  color: var(--bf-blue-700);
  text-decoration: none;
}

.saas-navbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(18, 33, 58, 0.08);
  box-shadow: 0 8px 30px rgba(18, 33, 58, 0.04);
}

.navbar-default {
  background: linear-gradient(135deg, #0d52d9 0%, #2f7df2 55%, #64a7ff 100%) !important;
  background-image: none !important;
  border: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: var(--bf-shadow-soft);
  padding: 6px 0 10px;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a,
.navbar-default .navbar-text {
  color: #ffffff !important;
  text-shadow: none;
  font-weight: 600;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #eaf3ff !important;
}

.navbar-default .navbar-toggle {
  border-color: rgba(255,255,255,0.35);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: rgba(255,255,255,0.12);
}

.navbar-default .dropdown-menu {
  border-radius: 14px;
  border: 1px solid rgba(18,33,58,0.08);
  box-shadow: var(--bf-shadow-soft);
}

.navbar-default .dropdown-menu > li > a {
  color: var(--bf-text) !important;
}

.navbar-default .btn-success {
  background: linear-gradient(180deg, #30b45f, #23924a);
  border-color: rgba(0,0,0,0.05);
  color: #fff;
}

.saas-navbar .navbar-brand,
.saas-brand {
  font-weight: 800;
  letter-spacing: 0;
  color: var(--bf-text) !important;
}

.saas-brand-badge {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bf-blue-700), #ff8a00);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-right: 10px;
  box-shadow: var(--bf-shadow-soft);
}

.saas-navbar .nav-link {
  color: #294060 !important;
  font-weight: 600;
}

.saas-navbar .nav-link:hover,
.saas-navbar .dropdown-item:hover {
  color: var(--bf-blue-700) !important;
}

.saas-logout-link {
  padding: 0.8rem 1.15rem !important;
  border: 1px solid rgba(29, 104, 229, 0.2);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
  box-shadow: 0 6px 18px rgba(18, 33, 58, 0.08);
}

.saas-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}

.saas-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--bf-radius-lg);
  background: linear-gradient(135deg, #0d52d9 0%, #2f7df2 55%, #64a7ff 100%);
  color: #fff;
  box-shadow: var(--bf-shadow);
}

.saas-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.22), transparent 0 10%),
    radial-gradient(circle at 92% 78%, rgba(255,255,255,0.18), transparent 0 9%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  pointer-events: none;
}

.saas-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 32px;
  align-items: center;
  padding: 42px 40px 36px;
}

.saas-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: 14px;
}

.saas-title {
  font-size: clamp(2.55rem, 4.2vw, 4.6rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 18px;
}

.saas-lead {
  max-width: 620px;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  margin: 0 0 28px;
}

.saas-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}

.saas-btn,
.saas-btn-outline,
.saas-btn-light,
.saas-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.3rem;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.saas-btn:hover,
.saas-btn-outline:hover,
.saas-btn-light:hover,
.saas-btn-primary:hover {
  transform: translateY(-1px);
}

.saas-btn-primary {
  background: linear-gradient(180deg, #ffac2b, #ff8d0a);
  color: #fff;
  box-shadow: 0 14px 28px rgba(255, 141, 10, 0.25);
}

.saas-btn-outline {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.38);
}

.saas-btn-light {
  background: #fff;
  color: var(--bf-blue-700);
  border-color: rgba(18, 33, 58, 0.08);
}

.saas-hero-panel {
  position: relative;
  background: rgba(255,255,255,0.96);
  color: var(--bf-text);
  border-radius: 24px;
  box-shadow: var(--bf-shadow);
  overflow: hidden;
}

.saas-hero-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bf-border);
  background: linear-gradient(180deg, #fff, #f7f9fd);
}

.saas-window-dots {
  display: flex;
  gap: 8px;
}

.saas-window-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e4e9f5;
}

.saas-hero-panel-body {
  padding: 18px;
}

.saas-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.saas-metric {
  background: #fff;
  border: 1px solid var(--bf-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--bf-shadow-soft);
}

.saas-metric-label {
  color: var(--bf-muted);
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.saas-metric-value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.05;
}

.saas-metric-foot {
  color: #1f9d55;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 6px;
}

.saas-dashboard-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: 12px;
}

.saas-panel {
  border: 1px solid var(--bf-border);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: var(--bf-shadow-soft);
}

.saas-panel-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.saas-list {
  display: grid;
  gap: 10px;
}

.saas-list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 0.95rem;
}

.saas-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: #eaf6ee;
  color: #2f8f4e;
  font-size: 0.72rem;
  font-weight: 800;
}

.saas-strip {
  margin-top: 16px;
  background: rgba(255,255,255,0.96);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: var(--bf-shadow-soft);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  color: var(--bf-text);
}

.saas-strip-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 10px;
}

.saas-strip-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(29,104,229,0.14), rgba(255,141,10,0.14));
  color: var(--bf-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
}

.saas-section {
  padding-top: 30px;
}

.saas-section-head {
  text-align: center;
  margin-bottom: 22px;
}

.saas-section-kicker {
  color: var(--bf-blue-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.saas-section-title {
  font-size: clamp(1.7rem, 2.5vw, 2.4rem);
  line-height: 1.15;
  font-weight: 900;
  margin: 0;
  color: var(--bf-text);
}

.saas-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.saas-card {
  background: #fff;
  border: 1px solid var(--bf-border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--bf-shadow-soft);
  min-height: 220px;
}

.saas-card h3 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 800;
}

.saas-card p {
  margin: 0 0 14px;
  color: var(--bf-muted);
  line-height: 1.6;
}

.saas-card-figure {
  height: 110px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f2f7ff, #ffffff);
  border: 1px solid rgba(18,33,58,0.06);
  margin-bottom: 14px;
}

.saas-subgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.saas-mini-card {
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--bf-shadow-soft);
}

.saas-mini-title {
  font-weight: 800;
  margin-bottom: 6px;
}

.saas-muted {
  color: var(--bf-muted);
}

.saas-statusbar {
  margin: 0;
  padding: 0 20px 12px;
}

.saas-statusbar-inner {
  background: #dfe2e7;
  border-radius: 0 0 0 0;
  padding: 10px 0 14px;
}

.saas-statusbar .saas-inline-state {
  color: #d9534f;
  font-weight: 700;
  margin-bottom: 4px;
}

.saas-statusbar select {
  border: 1px solid rgba(18, 33, 58, 0.18);
  border-radius: 10px;
  min-height: 38px;
}

.saas-statusbar .btn-primary {
  border-radius: 10px;
}

.saas-page-title {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 900;
  letter-spacing: 0;
  margin: 0 0 12px;
  color: var(--bf-text);
}

.saas-app-section {
  margin-top: 18px;
}

@media (max-width: 1100px) {
  .saas-hero-inner,
  .saas-dashboard-grid,
  .saas-card-grid,
  .saas-subgrid,
  .saas-strip,
  .saas-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .saas-shell {
    padding: 18px 14px 40px;
  }

  .saas-hero-inner {
    padding: 28px 20px 22px;
  }

  .saas-title {
    font-size: 2.35rem;
  }

  .saas-actions {
    gap: 10px;
  }

  .saas-btn,
  .saas-btn-outline,
  .saas-btn-light,
  .saas-btn-primary {
    width: 100%;
  }
}