@import url("./saas-shell-lookfeel.css?v=phase7-1-20260731");

:root {
  --brand-on-primary-safe: #111827;
  --brand-on-secondary-safe: #ffffff;
  --brand-on-surface-safe: #111827;
}

/*
 * La identidad del tenant se concentra en logo, primario y secundario.
 * Las superficies operativas permanecen neutrales para conservar lectura,
 * densidad empresarial y colores semánticos fiscales consistentes.
 */
.navigation-hierarchy-v1 {
  --white: #ffffff;
  --bg: #f5f5f5;
  --black: #111827;
  --text: #4d5560;
}

.navigation-hierarchy-v1 .premium-topbar {
  display: grid;
  grid-template-columns: minmax(170px, .72fr) minmax(260px, 1.28fr) auto;
  align-items: center;
}

.page-heading-block {
  min-width: 0;
}

.page-eyebrow {
  margin: 0 0 4px;
  color: #6b7280;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.page-title {
  margin: 0;
  color: #111827;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.navigation-hierarchy-v1 .organization-context-header {
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid #e5e7eb;
}

.navigation-hierarchy-v1 .organization-context-title {
  margin: 0;
  color: #171a21;
  font-size: 16px;
  line-height: 1.2;
}

.nav-section-label {
  margin: 18px 12px 4px;
  color: rgba(255, 255, 255, .48);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hierarchy-nav-group {
  border: 0;
}

.hierarchy-nav-group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
}

.hierarchy-nav-group > summary::-webkit-details-marker {
  display: none;
}

.hierarchy-nav-group > summary::after {
  content: '+';
  margin-left: auto;
  color: rgba(255, 255, 255, .55);
  font-size: 16px;
  line-height: 1;
}

.hierarchy-nav-group[open] > summary::after {
  content: '−';
}

.hierarchy-nav-group > summary:hover,
.hierarchy-nav-group[open] > summary {
  background: rgba(255, 255, 255, .06);
  color: var(--brand-on-secondary-safe, #ffffff);
}

.navigation-hierarchy-v1 .nav-item {
  color: color-mix(in srgb, var(--brand-on-secondary-safe, #ffffff) 78%, transparent);
}

.navigation-hierarchy-v1 .nav-item:hover,
.navigation-hierarchy-v1 .nav-item.active {
  background: var(--brand-primary, var(--yellow, #f2d200));
  color: var(--brand-on-primary-safe, #111827);
}

.navigation-hierarchy-v1 .brand-mark {
  background: var(--brand-primary, var(--yellow, #f2d200));
  color: var(--brand-on-primary-safe, #111827);
}

.navigation-hierarchy-v1 .brand-mark img[hidden],
.navigation-hierarchy-v1 .brand-mark strong[hidden] {
  display: none !important;
}

.navigation-hierarchy-v1 .brand-mark strong:not([hidden]) {
  display: block;
  max-width: 100%;
  color: var(--brand-on-primary-safe, #111827);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .04em;
  overflow-wrap: normal;
  white-space: nowrap;
}

.navigation-hierarchy-v1 .header-logo-fallback,
.navigation-hierarchy-v1 .premium-user-avatar {
  background: var(--brand-secondary, #171717);
  color: var(--brand-on-secondary-safe, #ffffff);
}

.navigation-hierarchy-v1.organization-only-context .sidebar .nav-menu::after {
  display: none !important;
}

.nav-context-note {
  margin: 10px 4px 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-left: 4px solid var(--brand-primary, #f2d200);
  border-radius: 8px;
  color: color-mix(in srgb, var(--brand-on-secondary-safe, #ffffff) 70%, transparent);
  background: rgba(255, 255, 255, .045);
  font-size: 11px;
  line-height: 1.5;
}

.mobile-nav-toggle,
.mobile-nav-backdrop {
  display: none;
}

.mobile-nav-toggle {
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid #d9dde4;
  border-radius: 10px;
  padding: 0 12px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .navigation-hierarchy-v1 .premium-topbar {
    grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.2fr);
  }

  .navigation-hierarchy-v1 .premium-topbar-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .navigation-hierarchy-v1 .app-shell {
    display: block;
  }

  .navigation-hierarchy-v1 .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 220;
    width: min(320px, 88vw);
    height: 100vh !important;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 24px 0 60px rgba(15, 23, 42, .28);
  }

  .navigation-hierarchy-v1.nav-drawer-open .sidebar {
    transform: translateX(0);
  }

  .navigation-hierarchy-v1 .nav-menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .navigation-hierarchy-v1 .mobile-nav-toggle {
    display: inline-flex;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    width: 100%;
    border: 0;
    background: rgba(15, 23, 42, .48);
  }

  .navigation-hierarchy-v1.nav-drawer-open .mobile-nav-backdrop {
    display: block;
  }

  .navigation-hierarchy-v1 .premium-topbar {
    position: sticky;
    top: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  .navigation-hierarchy-v1 .page-heading-block {
    min-width: 0;
  }

  .navigation-hierarchy-v1 .organization-context-header,
  .navigation-hierarchy-v1 .premium-topbar-actions {
    grid-column: 1 / -1;
  }

  .navigation-hierarchy-v1 .organization-context-header {
    padding: 10px 0 0;
    border-top: 1px solid #e5e7eb;
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .navigation-hierarchy-v1 .premium-topbar {
    padding: 12px;
  }

  .page-title {
    font-size: 24px;
  }

  .navigation-hierarchy-v1 .premium-user-card {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-hierarchy-v1 .sidebar {
    transition: none;
  }
}