/*
  CENIT RESIDENT SHELL CORE
  Version: 20260625-core-v1
  Scope: Shared resident portal CSS for Odoo Online Website/QWeb.
  Source of truth: 02. Cenit Core/02. Assets/css/cenit-resident-shell.css
*/

/* 0. Odoo chrome reset */
html body header#top,
html body .o_header_standard,
html body .o_header_affixed,
html body .o_top_fixed_element:not(.resident-header),
html body footer,
html body #footer {
  display: none !important;
}

html,
body,
#wrapwrap {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
}

/* 1. Tokens */
:root {
  --cenit-bg-dark: #020a14;
  --cenit-bg-light: #f5f5f7;
  --cenit-header-start: #02233a;
  --cenit-header-end: #020a14;
  --cenit-blue-950: #020a14;
  --cenit-blue-900: #031b2e;
  --cenit-blue-800: #062a46;
  --cenit-blue-700: #075985;
  --cenit-blue-500: #0ea5e9;
  --cenit-blue-400: #38bdf8;
  --cenit-orange: #ea580c;
  --cenit-red: #dc2626;
  --cenit-green: #10b981;
  --cenit-text-dark: #ffffff;
  --cenit-text-light: #111827;
  --cenit-muted-dark: rgba(235, 248, 255, 0.68);
  --cenit-muted-light: rgba(15, 23, 42, 0.58);
  --cenit-card-dark: linear-gradient(135deg, rgba(8, 77, 116, 0.96) 0%, rgba(3, 39, 67, 0.98) 52%, rgba(1, 13, 26, 1) 100%);
  --cenit-card-light: #ffffff;
  --cenit-border-dark: rgba(0, 159, 227, 0.42);
  --cenit-border-light: rgba(15, 23, 42, 0.105);
  --cenit-shadow-dark: 0 12px 28px rgba(0, 0, 0, 0.20), inset 1px 1px 0 rgba(255, 255, 255, 0.10), inset -1px -1px 0 rgba(0, 0, 0, 0.18);
  --cenit-shadow-light-card: 0 4px 18px rgba(15, 23, 42, 0.075);
  --cenit-shadow-action: 0 4px 6px rgba(0, 0, 0, 0.10);
  --cenit-bg-dark-action-final: linear-gradient(to bottom right, #0b6f9f 0%, #053a5c 30%, #010d1a 100%);
  --cenit-bg-light-action-final: linear-gradient(to bottom right, #ffffff 0%, #eef2f7 35%, #d9e2ec 100%);
  --cenit-radius-xl: 28px;
  --cenit-radius-lg: 24px;
  --cenit-radius-md: 18px;
  --cenit-radius-sm: 14px;
  --cenit-header-h: 78px;
  --cenit-header-h-mobile: 76px;
  --cenit-bottom-nav-h: 64px;
}

/* 2. Shell and themes */
.resident-panel {
  min-height: 100vh !important;
  overflow-x: hidden !important;
  font-family: inherit !important;
}

.resident-panel.theme-dark {
  color: var(--cenit-text-dark) !important;
  background: var(--cenit-bg-dark) !important;
}

.resident-panel.theme-light {
  color: var(--cenit-text-light) !important;
  background: var(--cenit-bg-light) !important;
}

.resident-shell {
  width: 100% !important;
  min-height: 100vh !important;
  padding-top: var(--cenit-header-h) !important;
  background: transparent !important;
}

.resident-main {
  width: min(100%, 1160px) !important;
  margin: 0 auto !important;
  padding: 24px !important;
  background: transparent !important;
}

/* 3. Fixed header and desktop nav */
.resident-header,
.resident-panel.theme-dark .resident-header,
.resident-panel.theme-light .resident-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 900 !important;
  width: 100% !important;
  min-height: var(--cenit-header-h) !important;
  display: block !important;
  color: #ffffff !important;
  background: linear-gradient(90deg, var(--cenit-header-start) 0%, var(--cenit-header-end) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
  box-shadow: none !important;
}

.resident-header-inner {
  width: min(100%, 1160px) !important;
  min-height: var(--cenit-header-h) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.resident-brand,
.resident-user {
  display: inline-flex !important;
  align-items: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.resident-brand-logo {
  display: block !important;
  width: auto !important;
  max-width: 160px !important;
  height: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
}

.resident-top-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.resident-top-link {
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: rgba(255, 255, 255, 0.84) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.resident-top-img {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 0.84 !important;
  filter: brightness(0) invert(1) !important;
}

.resident-top-link:hover,
.resident-top-link:focus {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.resident-panel.theme-dark .resident-top-link.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #020a14 0%, #031b2e 58%, #053a5a 100%) !important;
  border-color: rgba(125, 211, 252, 0.38) !important;
}

.resident-panel.theme-light .resident-top-link.is-active {
  color: #0f172a !important;
  background: linear-gradient(135deg, #ffffff 0%, #e9eef4 58%, #d7e0ea 100%) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: var(--cenit-shadow-light-card) !important;
}

.resident-panel.theme-light .resident-top-link:not(.is-active) .resident-top-img,
.resident-panel.theme-dark .resident-top-link .resident-top-img {
  filter: brightness(0) invert(1) !important;
}

.resident-panel.theme-light .resident-top-link.is-active .resident-top-img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(16%) saturate(1455%) hue-rotate(177deg) brightness(95%) contrast(95%) !important;
}

.resident-account {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.resident-user-name {
  display: block !important;
  max-width: 170px !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.resident-user-unit {
  display: none !important;
}

/* 4. Header controls */
.resident-theme-toggle,
.resident-bell,
.resident-avatar {
  box-sizing: border-box !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.resident-theme-toggle,
.resident-bell {
  position: relative !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.resident-theme-toggle:hover,
.resident-theme-toggle:focus,
.resident-bell:hover,
.resident-bell:focus {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.resident-theme-toggle img,
.resident-theme-toggle svg,
.resident-bell img,
.resident-bell svg,
.resident-bell-img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  color: currentColor !important;
  stroke: currentColor !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.92 !important;
}

.resident-theme-icon {
  position: absolute !important;
  inset: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.resident-panel.theme-dark .resident-theme-icon-moon,
.resident-panel.theme-light .resident-theme-icon-sun {
  opacity: 1 !important;
  visibility: visible !important;
}

.resident-avatar {
  border-radius: 999px !important;
  color: #ffffff !important;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 34%), linear-gradient(135deg, #0ea5e9 0%, #0284c7 45%, #075985 100%) !important;
  border: 1px solid rgba(125, 211, 252, 0.38) !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
}

/* 5. Notifications */
.resident-notification-wrap {
  position: relative !important;
  z-index: 930 !important;
}

.resident-notification-wrap summary {
  list-style: none !important;
}

.resident-notification-wrap summary::-webkit-details-marker {
  display: none !important;
}

.resident-bell-badge {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: #ef4444 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.resident-bell-badge:empty,
.resident-bell-badge[data-cenit-count="0"],
.resident-bell-badge[data-cenit-count=""],
.resident-bell-badge[data-count="0"],
.resident-bell-badge.is-empty,
.resident-bell-badge.is-zero {
  display: none !important;
}

.resident-notification-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 880 !important;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: rgba(0, 8, 18, 0) !important;
  backdrop-filter: blur(0) saturate(100%) !important;
  -webkit-backdrop-filter: blur(0) saturate(100%) !important;
  transition: opacity 150ms ease, visibility 150ms ease, background 150ms ease, backdrop-filter 150ms ease, -webkit-backdrop-filter 150ms ease !important;
}

.resident-panel.is-notification-open .resident-notification-backdrop,
.resident-panel:has(.resident-notification-wrap[open]) .resident-notification-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(0, 8, 18, 0.42) !important;
  backdrop-filter: blur(10px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(118%) !important;
}

.resident-panel.theme-light.is-notification-open .resident-notification-backdrop,
.resident-panel.theme-light:has(.resident-notification-wrap[open]) .resident-notification-backdrop {
  background: rgba(245, 245, 247, 0.54) !important;
}

.resident-notification-panel {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  right: 0 !important;
  z-index: 940 !important;
  width: min(380px, calc(100vw - 24px)) !important;
  max-height: min(560px, calc(100vh - 112px)) !important;
  overflow: auto !important;
  padding: 14px !important;
  border-radius: 26px !important;
  display: none !important;
}

.resident-notification-wrap[open] .resident-notification-panel {
  display: block !important;
}

.resident-panel.theme-dark .resident-notification-panel {
  color: #ffffff !important;
  background: rgba(14, 31, 49, 0.84) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 1px 1px 0 rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(22px) saturate(138%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(138%) !important;
}

.resident-panel.theme-light .resident-notification-panel {
  color: #111827 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: var(--cenit-shadow-light-card) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

.resident-notification-head,
.resident-notification-meta,
.resident-notification-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.resident-notification-title {
  font-size: 1.02rem !important;
  line-height: 1.1 !important;
  font-weight: 920 !important;
}

.resident-notification-count {
  opacity: 0.7 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

.resident-notification-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.resident-notification-item,
.resident-notification-empty {
  display: flex !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 20px !important;
}

.resident-panel.theme-dark .resident-notification-item,
.resident-panel.theme-dark .resident-notification-empty {
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.resident-panel.theme-light .resident-notification-item,
.resident-panel.theme-light .resident-notification-empty {
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid rgba(15, 23, 42, 0.075) !important;
}

.resident-notification-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0ea5e9 0%, #075985 100%) !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
}

.resident-notification-icon.is-financial {
  background: linear-gradient(135deg, #34d399 0%, #047857 100%) !important;
}

.resident-notification-icon.is-important {
  background: linear-gradient(135deg, #fb923c 0%, #c2410c 100%) !important;
}

.resident-notification-icon.is-critical {
  background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%) !important;
}

.resident-notification-priority {
  display: none !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  font-size: 0.66rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.resident-notification-priority.is-important,
.resident-notification-priority.is-critical {
  display: inline-flex !important;
}

.resident-notification-priority.is-important {
  color: #7c2d12 !important;
  background: rgba(251, 146, 60, 0.18) !important;
}

.resident-notification-priority.is-critical {
  color: #7f1d1d !important;
  background: rgba(248, 113, 113, 0.18) !important;
}

.resident-notification-more {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  margin-top: 12px !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.resident-panel.theme-dark .resident-notification-more {
  color: #ffffff !important;
  background: var(--cenit-bg-dark-action-final) !important;
  border: 1px solid rgba(125, 211, 252, 0.26) !important;
}

.resident-panel.theme-light .resident-notification-more {
  color: #0f172a !important;
  background: var(--cenit-bg-light-action-final) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

/* 6. Shared card, launcher, featured panel, and banner surfaces */
.resident-card,
.resident-state-card,
.resident-launcher-card,
.resident-home-app-item,
.resident-featured-panel,
.resident-featured-panel-island,
.resident-promo-banner,
.resident-promo-caption-card {
  box-sizing: border-box !important;
  border-radius: var(--cenit-radius-lg) !important;
}

.resident-panel.theme-dark .resident-card,
.resident-panel.theme-dark .resident-state-card,
.resident-panel.theme-dark .resident-launcher-card,
.resident-panel.theme-dark .resident-home-app-item,
.resident-panel.theme-dark .resident-featured-panel,
.resident-panel.theme-dark .resident-featured-panel-island,
.resident-panel.theme-dark .resident-promo-caption-card {
  color: #ffffff !important;
  background: var(--cenit-card-dark) !important;
  border: 1px solid var(--cenit-border-dark) !important;
  box-shadow: var(--cenit-shadow-dark) !important;
}

.resident-panel.theme-light .resident-card,
.resident-panel.theme-light .resident-state-card,
.resident-panel.theme-light .resident-launcher-card,
.resident-panel.theme-light .resident-home-app-item,
.resident-panel.theme-light .resident-featured-panel,
.resident-panel.theme-light .resident-featured-panel-island,
.resident-panel.theme-light .resident-promo-caption-card {
  color: #111827 !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--cenit-border-light) !important;
  box-shadow: var(--cenit-shadow-light-card) !important;
}

.resident-home-app-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)) !important;
  gap: 14px !important;
}

.resident-home-app-item {
  min-height: 132px !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-align: center !important;
  text-decoration: none !important;
}

.resident-home-app-icon img,
.resident-launcher-icon img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
}

.resident-featured-panel-frame,
.resident-featured-panel-html,
.resident-promo-banner-image,
.resident-promo-banner-picture,
.resident-promo-banner-picture img,
.resident-promo-banner-image img {
  width: 100% !important;
  border-radius: var(--cenit-radius-lg) !important;
}

.resident-promo-banner-picture img,
.resident-promo-banner-image img {
  display: block !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 7. Unit badge color system */
.resident-panel .is-unit-badge {
  box-sizing: border-box !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: #ffffff !important;
  background: linear-gradient(to bottom right, #0b6f9f 0%, #053a5c 50%, #010d1a 100%) !important;
  border: 1px solid rgba(125, 211, 252, 0.28) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16), inset 1px 1px 0 rgba(255, 255, 255, 0.20), inset -1px -1px 0 rgba(0, 0, 0, 0.26) !important;
}

.resident-unit-badge-inner,
.resident-unit-context-badge .resident-unit-badge-inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

.resident-unit-code,
.resident-unit-context-code {
  color: currentColor !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.resident-panel .is-unit-badge.is-unit-color-cenit,
.resident-panel.theme-dark .is-unit-badge.is-unit-color-cenit {
  color: #ffffff !important;
  background: linear-gradient(to bottom right, #0b6f9f 0%, #053a5c 50%, #010d1a 100%) !important;
  border-color: rgba(125, 211, 252, 0.28) !important;
}

.resident-panel.theme-light .is-unit-badge.is-unit-color-cenit {
  color: #172033 !important;
  background: linear-gradient(to bottom right, #f6f8fb 0%, #dde5ee 52%, #aebbcc 100%) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
}

.resident-panel .is-unit-badge.is-unit-color-onyx {
  color: #ffffff !important;
  background: linear-gradient(to bottom right, #475569 0%, #111827 50%, #020617 100%) !important;
  border-color: rgba(203, 213, 225, 0.36) !important;
}

.resident-panel .is-unit-badge.is-unit-color-grafito {
  color: #ffffff !important;
  background: linear-gradient(to bottom right, #8b95a3 0%, #394454 48%, #121923 100%) !important;
  border-color: rgba(203, 213, 225, 0.34) !important;
}

.resident-panel .is-unit-badge.is-unit-color-plata {
  color: #172033 !important;
  background: linear-gradient(to bottom right, #f7f9fc 0%, #cbd5e1 50%, #64748b 100%) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
}

.resident-panel .is-unit-badge.is-unit-color-champagne {
  color: #1f1300 !important;
  background: linear-gradient(to bottom right, #f7e4ba 0%, #c39242 52%, #5f3b13 100%) !important;
  border-color: rgba(214, 170, 91, 0.34) !important;
}

.resident-panel .is-unit-badge.is-unit-color-arena {
  color: #1f1300 !important;
  background: linear-gradient(to bottom right, #f8e4b8 0%, #c69a57 52%, #6f4b1f 100%) !important;
  border-color: rgba(198, 154, 87, 0.40) !important;
}

.resident-panel .is-unit-badge.is-unit-color-cobre {
  color: #ffffff !important;
  background: linear-gradient(to bottom right, #a65a32 0%, #5c260d 50%, #1a0b04 100%) !important;
  border-color: rgba(205, 128, 80, 0.34) !important;
}

.resident-panel .is-unit-badge.is-unit-color-nebula {
  color: #ffffff !important;
  background: linear-gradient(to bottom right, #4b3fc0 0%, #211049 50%, #050311 100%) !important;
  border-color: rgba(150, 132, 255, 0.30) !important;
}

.resident-panel .is-unit-badge.is-unit-color-dorado {
  color: #211300 !important;
  background: linear-gradient(to bottom right, #f7d86a 0%, #b87312 52%, #4a2608 100%) !important;
  border-color: rgba(247, 216, 106, 0.40) !important;
}

.resident-panel .is-unit-badge.is-unit-color-ecuador {
  color: #ffffff !important;
  background: linear-gradient(
    to bottom,
    #FFC600 0%,
    #E3B106 50%,
    #0F3C95 50%,
    #0E347F 75%,
    #AD141C 75%,
    #8F1117 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.resident-panel .is-unit-color-plata .resident-unit-badge-icon img,
.resident-panel .is-unit-color-champagne .resident-unit-badge-icon img,
.resident-panel .is-unit-color-arena .resident-unit-badge-icon img,
.resident-panel .is-unit-color-dorado .resident-unit-badge-icon img,
.resident-panel.theme-light .is-unit-color-cenit .resident-unit-badge-icon img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(18%) saturate(1120%) hue-rotate(178deg) brightness(91%) contrast(93%) !important;
}

.resident-panel .is-unit-color-onyx .resident-unit-badge-icon img,
.resident-panel .is-unit-color-grafito .resident-unit-badge-icon img,
.resident-panel .is-unit-color-cobre .resident-unit-badge-icon img,
.resident-panel .is-unit-color-nebula .resident-unit-badge-icon img,
.resident-panel .is-unit-color-ecuador .resident-unit-badge-icon img,
.resident-panel.theme-dark .is-unit-color-cenit .resident-unit-badge-icon img {
  filter: brightness(0) invert(1) !important;
}

/* 8. Shared unit context control */
.resident-panel .resident-unit-context-control {
  box-sizing: border-box !important;
  position: relative !important;
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 6px 42px 6px 6px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.resident-panel.theme-dark .resident-unit-context-control {
  color: #ffffff !important;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 42%, rgba(0, 0, 0, 0.12) 100%), rgba(1, 13, 26, 0.42) !important;
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12), inset 1px 1px 0 rgba(255, 255, 255, 0.08), inset -1px -1px 0 rgba(0, 0, 0, 0.20) !important;
  backdrop-filter: blur(16px) saturate(126%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(126%) !important;
}

.resident-panel.theme-light .resident-unit-context-control {
  color: #0f172a !important;
  background: linear-gradient(to bottom right, #ffffff 0%, rgba(248, 250, 252, 0.96) 48%, rgba(226, 232, 240, 0.84) 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: var(--cenit-shadow-light-card) !important;
}

.resident-panel .resident-unit-context-control:focus-within {
  border-color: rgba(56, 189, 248, 0.52) !important;
}

.resident-panel .resident-unit-context-badge.is-unit-badge {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  flex: 0 0 42px !important;
}

.resident-panel .resident-unit-context-select {
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

.resident-panel.theme-dark .resident-unit-context-select option {
  color: #ffffff !important;
  background: #020a14 !important;
}

.resident-panel.theme-light .resident-unit-context-select option {
  color: #0f172a !important;
  background: #ffffff !important;
}

.resident-panel .resident-unit-context-arrow {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  z-index: 2 !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.resident-panel.theme-dark .resident-unit-context-arrow {
  color: rgba(235, 248, 255, 0.70) !important;
}

.resident-panel.theme-light .resident-unit-context-arrow {
  color: rgba(15, 23, 42, 0.58) !important;
}

/* 9. Action buttons */
.resident-action,
.resident-state-btn,
.resident-primary-action {
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.resident-cinematic-button {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.resident-cinematic-button:hover,
.resident-cinematic-button:focus {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-decoration: none !important;
}

.resident-cinematic-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.38) !important;
  outline-offset: 3px !important;
}

.resident-cinematic-button.is-danger,
.resident-cinematic-button.is-destructive {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.035) 30%,
      rgba(0, 0, 0, 0) 58%,
      rgba(0, 0, 0, 0.30) 100%
    ),
    linear-gradient(to bottom right,
      #C90000 0%,
      #C40000 48%,
      #760000 100%
    ) !important;
  border: 1px solid rgba(126, 0, 0, 0.72) !important;
  box-shadow: none !important;
}

.resident-cinematic-button.is-danger:hover,
.resident-cinematic-button.is-destructive:hover {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.04) 30%,
      rgba(0, 0, 0, 0) 58%,
      rgba(0, 0, 0, 0.34) 100%
    ),
    linear-gradient(to bottom right,
      #D60000 0%,
      #C90000 48%,
      #690000 100%
    ) !important;
}

.resident-cinematic-button.is-success,
.resident-cinematic-button.is-payment {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 30%,
      rgba(0, 0, 0, 0) 58%,
      rgba(0, 0, 0, 0.28) 100%
    ),
    linear-gradient(to bottom right,
      #22C55E 0%,
      #059669 48%,
      #064E3B 100%
    ) !important;
  border: 1px solid rgba(6, 95, 70, 0.52) !important;
  box-shadow: none !important;
}

.resident-cinematic-button.is-service,
.resident-cinematic-button.is-orange {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 30%,
      rgba(0, 0, 0, 0) 58%,
      rgba(0, 0, 0, 0.28) 100%
    ),
    linear-gradient(to bottom right,
      #FF9A3D 0%,
      #F97316 48%,
      #9A3412 100%
    ) !important;
  border: 1px solid rgba(154, 52, 18, 0.50) !important;
  box-shadow: none !important;
}

.resident-cinematic-button.is-cenit,
.resident-cinematic-button.is-info {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 30%,
      rgba(0, 0, 0, 0) 58%,
      rgba(0, 0, 0, 0.28) 100%
    ),
    linear-gradient(to bottom right,
      #18A7E0 0%,
      #009FE3 46%,
      #075985 100%
    ) !important;
  border: 1px solid rgba(7, 89, 133, 0.50) !important;
  box-shadow: none !important;
}

.resident-panel.theme-dark .resident-action,
.resident-panel.theme-dark .resident-state-btn,
.resident-panel.theme-dark .resident-primary-action {
  color: #ffffff !important;
  background: var(--cenit-bg-dark-action-final) !important;
  border: 1px solid rgba(125, 211, 252, 0.26) !important;
  box-shadow: var(--cenit-shadow-action) !important;
}

.resident-panel.theme-light .resident-action,
.resident-panel.theme-light .resident-state-btn,
.resident-panel.theme-light .resident-primary-action {
  color: #0f172a !important;
  background: var(--cenit-bg-light-action-final) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: var(--cenit-shadow-action) !important;
}

/* 10. Mobile bottom nav and responsive shell */
.resident-bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 880 !important;
  display: none !important;
  min-height: var(--cenit-bottom-nav-h) !important;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(18px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(128%) !important;
}

.resident-panel.theme-dark .resident-bottom-nav {
  background: rgba(2, 10, 20, 0.90) !important;
}

.resident-panel.theme-light .resident-bottom-nav {
  background: rgba(255, 255, 255, 0.88) !important;
  border-top-color: rgba(15, 23, 42, 0.10) !important;
}

.resident-bottom-nav-inner {
  height: var(--cenit-bottom-nav-h) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.resident-bottom-link {
  min-width: 0 !important;
  height: 52px !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: inherit !important;
  text-decoration: none !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.resident-bottom-img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

.resident-panel.theme-dark .resident-bottom-link {
  color: rgba(255, 255, 255, 0.72) !important;
}

.resident-panel.theme-light .resident-bottom-link {
  color: rgba(15, 23, 42, 0.68) !important;
}

.resident-panel.theme-dark .resident-bottom-link.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #020a14 0%, #031b2e 58%, #053a5a 100%) !important;
}

.resident-panel.theme-light .resident-bottom-link.is-active {
  color: #0f172a !important;
  background: linear-gradient(135deg, #ffffff 0%, #e9eef4 58%, #d7e0ea 100%) !important;
  box-shadow: var(--cenit-shadow-light-card) !important;
}

@media (max-width: 900px) {
  .resident-top-nav,
  .resident-user-copy {
    display: none !important;
  }

  .resident-main {
    padding: 18px 16px calc(var(--cenit-bottom-nav-h) + 32px) !important;
  }

  .resident-bottom-nav {
    display: block !important;
  }
}

@media (max-width: 780px) {
  .resident-shell {
    padding-top: var(--cenit-header-h-mobile) !important;
  }

  .resident-header,
  .resident-header-inner {
    min-height: var(--cenit-header-h-mobile) !important;
  }

  .resident-header-inner {
    padding: 0 16px !important;
  }

  .resident-brand-logo {
    max-width: 138px !important;
    height: 48px !important;
    max-height: 48px !important;
  }

  .resident-panel .is-unit-badge {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  .resident-panel .resident-unit-context-control {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 5px 40px 5px 5px !important;
  }

  .resident-panel .resident-unit-context-badge.is-unit-badge {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    flex-basis: 42px !important;
  }

  .resident-panel .resident-unit-context-select {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 0.84rem !important;
  }

  .resident-notification-panel {
    position: fixed !important;
    top: calc(var(--cenit-header-h-mobile) + 10px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100vh - var(--cenit-header-h-mobile) - var(--cenit-bottom-nav-h) - 36px) !important;
  }

  .resident-home-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}