/* System 360 - UI Restructure V8 (authoritative final layer) */

#system360-app {
  --s8-space-1: 8px;
  --s8-space-2: 12px;
  --s8-space-3: 16px;
  --s8-space-4: 24px;
  --s8-space-5: 32px;
  --s8-space-6: 40px;
  --s8-radius-sm: 10px;
  --s8-radius-md: 14px;
  --s8-radius-lg: 16px;
  --s8-bg: #f5f6f8;
  --s8-bg-soft: #edf0f4;
  --s8-surface: rgba(255, 255, 255, 0.9);
  --s8-surface-strong: rgba(255, 255, 255, 0.96);
  --s8-border: rgba(15, 23, 42, 0.1);
  --s8-text: #111827;
  --s8-soft: #6b7280;
  --s8-accent: #0a84ff;
  --s8-accent-soft: rgba(10, 132, 255, 0.14);
  --s8-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08);
  --s8-shadow-md: 0 14px 34px rgba(15, 23, 42, 0.12);
  --s8-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  #system360-app {
    --s8-bg: #0f1218;
    --s8-bg-soft: #141a23;
    --s8-surface: rgba(29, 34, 43, 0.9);
    --s8-surface-strong: rgba(35, 40, 50, 0.95);
    --s8-border: rgba(255, 255, 255, 0.12);
    --s8-text: #f3f5f8;
    --s8-soft: #a8b0be;
    --s8-accent: #4aa3ff;
    --s8-accent-soft: rgba(74, 163, 255, 0.2);
    --s8-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.32);
    --s8-shadow-md: 0 22px 44px rgba(0, 0, 0, 0.44);
  }
}

#system360-app,
#system360-app * {
  box-sizing: border-box;
  font-family: "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

#system360-app .s360-app {
  color: var(--s8-text) !important;
  background:
    radial-gradient(1100px 640px at -12% -20%, rgba(10,132,255,.16), transparent 60%),
    radial-gradient(980px 700px at 118% -15%, rgba(52,199,89,.09), transparent 62%),
    linear-gradient(180deg, var(--s8-bg) 0%, var(--s8-bg-soft) 100%) !important;
}

#system360-app .s360-shell {
  width: calc(100vw - var(--s8-space-3)) !important;
  max-width: calc(100vw - var(--s8-space-3)) !important;
  height: calc(100dvh - var(--s8-space-3)) !important;
  margin: calc(var(--s8-space-3) / 2) !important;
  padding: var(--s8-space-2) !important;
  gap: var(--s8-space-2) !important;
  border-radius: var(--s8-radius-lg) !important;
  border: 1px solid var(--s8-border) !important;
  background: var(--s8-surface) !important;
  box-shadow: var(--s8-shadow-md) !important;
  overflow: hidden !important;
}

#system360-app .s360-workarea {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 256px minmax(0, 1fr) !important;
  gap: var(--s8-space-2) !important;
}

#system360-app .s360-shell.collapsed .s360-workarea {
  grid-template-columns: 92px minmax(0, 1fr) !important;
}

#system360-app .s360-sidebar {
  min-width: 0 !important;
  height: 100% !important;
  padding: var(--s8-space-2) !important;
  border-radius: var(--s8-radius-lg) !important;
  border: 1px solid var(--s8-border) !important;
  background: var(--s8-surface-strong) !important;
  box-shadow: var(--s8-shadow-sm) !important;
  overflow: hidden !important;
}

#system360-app .s360-sidebar-head {
  min-height: 74px !important;
  gap: var(--s8-space-1) !important;
  padding: var(--s8-space-1) !important;
}

#system360-app .s360-nav {
  padding: var(--s8-space-1) !important;
  gap: 6px !important;
}

#system360-app .s360-nav-section-label {
  margin: var(--s8-space-2) 0 4px !important;
  padding: 0 var(--s8-space-1) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--s8-soft) !important;
}

#system360-app .s360-nav-item {
  min-height: 44px !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  color: var(--s8-text) !important;
  background: transparent !important;
}

#system360-app .s360-nav-item:hover {
  border-color: var(--s8-border) !important;
  background: var(--s8-accent-soft) !important;
}

#system360-app .s360-nav-item.active {
  border-color: rgba(10,132,255,.4) !important;
  background: rgba(10,132,255,.16) !important;
  color: #0a5fc0 !important;
}

#system360-app .s360-main,
#system360-app .s360-content-scroll,
#system360-app .s360-content-scroll > section,
#system360-app .s360-content-scroll > div,
#system360-app .s360-content-scroll > article {
  min-width: 0 !important;
  max-width: 100% !important;
}

#system360-app .s360-main {
  overflow: hidden !important;
}

#system360-app .s360-content-scroll {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px var(--s8-space-2) var(--s8-space-3) 2px !important;
}

#system360-app .s360-topbar {
  min-height: 60px !important;
  padding: 10px var(--s8-space-3) !important;
  gap: var(--s8-space-2) !important;
  border-radius: var(--s8-radius-md) !important;
  border: 1px solid var(--s8-border) !important;
  background: var(--s8-surface-strong) !important;
  box-shadow: var(--s8-shadow-sm) !important;
}

#system360-app .s360-top-left {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#system360-app .s360-right {
  min-width: 0 !important;
  flex: 1 1 520px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--s8-space-1) !important;
}

#system360-app .s360-work-period-badge {
  font-weight: 600 !important;
  border: 1px solid var(--s8-border) !important;
  transition: background-color 220ms var(--s8-ease), color 220ms var(--s8-ease), border-color 220ms var(--s8-ease) !important;
}

#system360-app .s360-work-period-badge.is-work-period {
  color: #0f5132 !important;
  border-color: rgba(52, 199, 89, 0.36) !important;
  background: rgba(52, 199, 89, 0.18) !important;
}

#system360-app .s360-work-period-badge.is-overtime {
  color: #7a4b00 !important;
  border-color: rgba(255, 149, 0, 0.36) !important;
  background: rgba(255, 149, 0, 0.18) !important;
}

@media (prefers-color-scheme: dark) {
  #system360-app .s360-work-period-badge.is-work-period {
    color: #daf8e7 !important;
    border-color: rgba(81, 207, 120, 0.48) !important;
    background: rgba(52, 199, 89, 0.24) !important;
  }

  #system360-app .s360-work-period-badge.is-overtime {
    color: #ffe2b2 !important;
    border-color: rgba(255, 171, 64, 0.5) !important;
    background: rgba(255, 149, 0, 0.24) !important;
  }
}

#system360-app .s360-breadcrumbs {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#system360-app .s360-crumb,
#system360-app .s360-crumb-sep { color: var(--s8-soft) !important; font-size: 11px !important; }
#system360-app .s360-crumb.current { color: var(--s8-accent) !important; }

#system360-app .s360-title-text {
  font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}

#system360-app .s360-panel,
#system360-app .s360-card,
#system360-app .s360-modal,
#system360-app .s360-dropdown,
#system360-app .s360-notif-card,
#system360-app .s360-seguimientos-wrap {
  border-radius: var(--s8-radius-md) !important;
  border: 1px solid var(--s8-border) !important;
  background: var(--s8-surface) !important;
  box-shadow: var(--s8-shadow-sm) !important;
}

#system360-app .s360-panel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: var(--s8-space-3) !important;
  margin-bottom: var(--s8-space-2) !important;
  overflow: visible !important;
}

#system360-app .s360-panel h3 {
  margin: 0 0 var(--s8-space-2) !important;
}

#system360-app .s360-card {
  min-width: 0 !important;
  padding: var(--s8-space-3) !important;
}

#system360-app .s360-grid,
#system360-app .s360-grid-admin {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: var(--s8-space-3) !important;
}

#system360-app .s360-grid-2,
#system360-app .s360-two {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: var(--s8-space-3) !important;
}

#system360-app .s360-flex { gap: var(--s8-space-2) !important; }

#system360-app .s360-agenda-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--s8-space-2) !important;
  margin-bottom: var(--s8-space-2) !important;
}

#system360-app .s360-agenda-actions {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--s8-space-1) !important;
}

#system360-app .s360-folder-tabs,
#system360-app .s360-time-tabs,
#system360-app .s360-folder-tabs-inline {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#system360-app .s360-folder-tabs,
#system360-app .s360-time-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--s8-space-1) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 4px !important;
}

#system360-app .s360-folder-tab,
#system360-app .s360-time-tab {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: var(--s8-radius-sm) !important;
}

#system360-app .s360-btn {
  min-height: 40px !important;
  border-radius: var(--s8-radius-sm) !important;
  padding: 8px 12px !important;
}

#system360-app .s360-pred-call-stage {
  min-height: 250px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 10px !important;
}

#system360-app .s360-pred-morph-stage {
  border: 1px solid rgba(0, 100, 169, 0.16) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 251, 255, 0.92)) !important;
  box-shadow: 0 12px 24px rgba(5, 77, 123, 0.1) !important;
  padding: 14px !important;
  display: grid !important;
  gap: 10px !important;
}

#system360-app .s360-pred-morph-stage > h3 {
  margin: 0 !important;
}

#system360-app .s360-pred-morph-stage-calling {
  min-height: 220px !important;
  align-content: center !important;
}

#system360-app .s360-pred-morph-stage-typify {
  min-height: 250px !important;
}

@supports (view-transition-name: s360-pred-morph) {
  #system360-app .s360-pred-call-circle,
  #system360-app .s360-pred-morph-stage {
    contain: layout paint style !important;
  }
  ::view-transition-old(s360-pred-morph) {
    animation: s360PredMorphOld 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    transform-origin: center;
  }
  ::view-transition-new(s360-pred-morph) {
    animation: s360PredMorphNew 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    transform-origin: center;
  }
}

@keyframes s360PredMorphOld {
  from {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    border-radius: 999px;
  }
  to {
    opacity: 0;
    transform: scale(0.72);
    filter: blur(6px);
    border-radius: 18px;
  }
}

@keyframes s360PredMorphNew {
  from {
    opacity: 0;
    transform: scale(0.58);
    filter: blur(8px);
    border-radius: 999px;
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    border-radius: 20px;
  }
}

#system360-app .s360-btn.s360-pred-call-circle {
  width: 154px !important;
  height: 154px !important;
  min-height: 154px !important;
  min-width: 154px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-color: rgba(17, 107, 50, 0.55) !important;
  background: radial-gradient(circle at 30% 25%, #2be06d, #169d47 64%, #11823c 100%) !important;
  box-shadow: 0 18px 34px rgba(22, 126, 58, 0.34), inset 0 4px 10px rgba(255, 255, 255, 0.18) !important;
}

#system360-app .s360-btn.s360-pred-call-circle:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.05) !important;
}

#system360-app .s360-pred-call-circle-icon {
  width: 58px !important;
  height: 58px !important;
  display: inline-grid !important;
  place-items: center !important;
}

#system360-app .s360-pred-call-circle-icon .s360-svg-icon {
  width: 42px !important;
  height: 42px !important;
  stroke-width: 2.2 !important;
  color: #ffffff !important;
}

#system360-app .s360-pred-call-caption {
  margin: 0 !important;
  font-weight: 700 !important;
  color: #2a5572 !important;
}

@media (max-width: 760px) {
  #system360-app .s360-pred-call-stage {
    min-height: 210px !important;
  }
  #system360-app .s360-btn.s360-pred-call-circle {
    width: 134px !important;
    height: 134px !important;
    min-width: 134px !important;
    min-height: 134px !important;
  }
}

#system360-app .s360-input,
#system360-app .s360-select,
#system360-app .s360-textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 40px !important;
  border-radius: var(--s8-radius-sm) !important;
}

#system360-app .s360-textarea { min-height: 96px !important; }

#system360-app #s360-sales-date { flex: 0 1 190px !important; min-width: 170px !important; }
#system360-app #s360-sales-search { flex: 1 1 320px !important; min-width: 220px !important; }
#system360-app #s360-sales-refresh { flex: 0 0 auto !important; }

#system360-app .s360-seguimientos-wrap {
  margin-top: var(--s8-space-2) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: var(--s8-space-1) !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable both-edges !important;
}

#system360-app .s360-seguimientos-wrap > .s360-table,
#system360-app .s360-seguimientos-wrap > .s360-table-follow,
#system360-app .s360-seguimientos-wrap > .s360-table-sales {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

#system360-app .s360-seguimientos-wrap > table th,
#system360-app .s360-seguimientos-wrap > table td { white-space: nowrap !important; }

#system360-app .s360-table th,
#system360-app .s360-table td,
#system360-app .s360-table-follow th,
#system360-app .s360-table-follow td,
#system360-app .s360-table-sales th,
#system360-app .s360-table-sales td {
  padding: 11px 12px !important;
  vertical-align: middle !important;
}

#system360-app .s360-modal {
  width: min(1040px, 95vw) !important;
  max-height: 90vh !important;
  border-radius: var(--s8-radius-lg) !important;
  overflow: hidden !important;
}

#system360-app .s360-modal-head,
#system360-app .s360-modal-body { padding: var(--s8-space-3) !important; }
#system360-app .s360-modal-body { max-height: calc(90vh - 72px) !important; overflow: auto !important; }

@media (max-width: 1200px) {
  #system360-app .s360-workarea { grid-template-columns: 230px minmax(0, 1fr) !important; }
}

@media (max-width: 980px) {
  #system360-app .s360-shell {
    width: calc(100vw - var(--s8-space-1)) !important;
    max-width: calc(100vw - var(--s8-space-1)) !important;
    height: calc(100dvh - var(--s8-space-1)) !important;
    margin: calc(var(--s8-space-1) / 2) !important;
    padding: var(--s8-space-1) !important;
  }
  #system360-app .s360-workarea {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: var(--s8-space-1) !important;
  }
  #system360-app .s360-panel { padding: 14px !important; }
  #system360-app .s360-grid,
  #system360-app .s360-grid-admin { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; gap: var(--s8-space-2) !important; }
  #system360-app .s360-grid-2,
  #system360-app .s360-two { grid-template-columns: 1fr !important; }
  #system360-app #s360-sales-date,
  #system360-app #s360-sales-search,
  #system360-app #s360-sales-refresh { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; }
}

/* Client portal order/spacing/proportion */
#system360-client-portal {
  --cp-space-1: 8px;
  --cp-space-2: 12px;
  --cp-space-3: 16px;
  --cp-space-4: 24px;
}

#system360-client-portal .s360c-wrap {
  max-width: min(1080px, calc(100vw - 20px));
  margin: var(--cp-space-3) auto;
  padding: var(--cp-space-3);
}

#system360-client-portal .s360c-card { padding: var(--cp-space-3); }
#system360-client-portal .s360c-customer-strip { gap: var(--cp-space-3); }
#system360-client-portal .s360c-steps-row { gap: var(--cp-space-2); margin-bottom: var(--cp-space-3); }
#system360-client-portal .s360c-form-grid { gap: var(--cp-space-2); }
#system360-client-portal .s360c-btn-row { gap: var(--cp-space-2); margin-top: var(--cp-space-2); }
#system360-client-portal .s360c-office-grid { gap: var(--cp-space-2); }

@media (max-width: 860px) {
  #system360-client-portal .s360c-customer-strip { grid-template-columns: 1fr !important; }
  #system360-client-portal .s360c-wrap { max-width: calc(100vw - 12px); padding: var(--cp-space-2); }
}

/* Sidebar Layout V9 - aligned grid, balanced spacing, smooth collapse */
#system360-app .s360-workarea {
  transition: grid-template-columns 320ms cubic-bezier(0.4, 0, 0.2, 1), gap 320ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: grid-template-columns;
}

#system360-app .s360-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 12px !important;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 260ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 280ms cubic-bezier(0.4, 0, 0.2, 1), padding 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
  opacity: 1;
  will-change: transform, opacity;
}

#system360-app .s360-shell.collapsed .s360-sidebar {
  transform: translateX(-2px);
  opacity: 0.985;
  padding: 12px 8px !important;
}

#system360-app .s360-sidebar-head {
  min-height: 56px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 36px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 6px 0 !important;
}

#system360-app .s360-brand {
  height: 32px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  text-align: left !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#system360-app .s360-brand-full,
#system360-app .s360-brand-short {
  justify-content: flex-start !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

#system360-app .s360-brand-short {
  justify-content: center !important;
}

#system360-app .s360-side-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1), border-color 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#system360-app .s360-side-toggle:hover {
  transform: scale(1.04) !important;
}

#system360-app .s360-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-auto-rows: min-content !important;
  gap: 8px !important;
  padding: 4px 4px 2px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#system360-app .s360-nav-section-label {
  margin: 6px 0 0 !important;
  padding: 6px 10px 2px !important;
  font-size: 10px !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: var(--s8-soft) !important;
}

#system360-app .s360-nav-item {
  width: 100% !important;
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 20px !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--s8-text) !important;
  transform: scale(1);
  transform-origin: center;
  transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1), border-color 220ms cubic-bezier(0.4, 0, 0.2, 1), color 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1), padding 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

#system360-app .s360-nav-item::before {
  content: none !important;
  display: none !important;
}

#system360-app .s360-nav-item:hover {
  transform: scale(1.03);
  border-color: var(--s8-border) !important;
  background: var(--s8-accent-soft) !important;
}

#system360-app .s360-nav-item.active {
  border-color: rgba(10, 132, 255, 0.42) !important;
  background: rgba(10, 132, 255, 0.16) !important;
  color: #0a5fc0 !important;
}

#system360-app .s360-nav-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 24px !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
}

#system360-app .s360-nav-item .s360-nav-icon .s360-svg-icon {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  transform: none !important;
  transform-origin: center center !important;
  line-height: 0 !important;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

#system360-app .s360-nav-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  opacity: 1;
  transform: translateX(0);
  transition: max-width 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 230ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

#system360-app .s360-nav-meta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  width: 20px !important;
  height: 20px !important;
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 260ms cubic-bezier(0.4, 0, 0.2, 1), width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

#system360-app .s360-chevron {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  color: var(--s8-soft) !important;
  pointer-events: auto !important;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), color 220ms cubic-bezier(0.4, 0, 0.2, 1), background-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

#system360-app .s360-chevron .s360-svg-icon {
  width: 16px !important;
  height: 16px !important;
}

#system360-app .s360-nav-item:hover .s360-chevron {
  background: rgba(10, 132, 255, 0.12) !important;
}

#system360-app .s360-chevron.open {
  transform: rotate(90deg);
  color: var(--s8-accent) !important;
}

#system360-app .s360-submenu-wrap {
  display: grid !important;
  gap: 6px !important;
  margin: 0 0 0 14px !important;
  padding-left: 10px !important;
  border-left: 1px solid var(--s8-border) !important;
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1), margin 240ms cubic-bezier(0.4, 0, 0.2, 1), padding 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

#system360-app .s360-submenu-wrap.open {
  max-height: 460px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

#system360-app .s360-sub-item {
  min-height: 44px !important;
  grid-template-columns: 22px minmax(0, 1fr) 0 !important;
  column-gap: 10px !important;
  padding: 8px 10px !important;
}

#system360-app .s360-sub-item .s360-nav-meta {
  width: 0 !important;
  opacity: 0 !important;
}

#system360-app .s360-sidebar-foot {
  margin-top: auto !important;
  padding: 4px 0 0 !important;
}

#system360-app .s360-side-userchip {
  width: 100% !important;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
}

#system360-app .s360-side-user-meta {
  min-width: 0 !important;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1), max-width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

#system360-app .s360-shell:not(.collapsed) .s360-nav > .s360-nav-item:nth-of-type(1) .s360-nav-label,
#system360-app .s360-shell:not(.collapsed) .s360-nav > .s360-nav-item:nth-of-type(1) .s360-nav-meta { transition-delay: 18ms; }
#system360-app .s360-shell:not(.collapsed) .s360-nav > .s360-nav-item:nth-of-type(2) .s360-nav-label,
#system360-app .s360-shell:not(.collapsed) .s360-nav > .s360-nav-item:nth-of-type(2) .s360-nav-meta { transition-delay: 34ms; }
#system360-app .s360-shell:not(.collapsed) .s360-nav > .s360-nav-item:nth-of-type(3) .s360-nav-label,
#system360-app .s360-shell:not(.collapsed) .s360-nav > .s360-nav-item:nth-of-type(3) .s360-nav-meta { transition-delay: 50ms; }
#system360-app .s360-shell:not(.collapsed) .s360-nav > .s360-nav-item:nth-of-type(4) .s360-nav-label,
#system360-app .s360-shell:not(.collapsed) .s360-nav > .s360-nav-item:nth-of-type(4) .s360-nav-meta { transition-delay: 66ms; }
#system360-app .s360-shell:not(.collapsed) .s360-nav > .s360-nav-item:nth-of-type(5) .s360-nav-label,
#system360-app .s360-shell:not(.collapsed) .s360-nav > .s360-nav-item:nth-of-type(5) .s360-nav-meta { transition-delay: 82ms; }

#system360-app .s360-shell.collapsed .s360-sidebar-head {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  padding: 4px 0 0 !important;
}

#system360-app .s360-shell.collapsed .s360-brand {
  justify-content: center !important;
  padding: 0 !important;
}

#system360-app .s360-shell.collapsed .s360-brand-full {
  opacity: 0 !important;
  transform: translateY(-6px) scale(0.92) !important;
}

#system360-app .s360-shell.collapsed .s360-brand-short {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

#system360-app .s360-shell.collapsed .s360-nav {
  justify-items: center !important;
  padding: 4px 0 2px !important;
  gap: 8px !important;
}

#system360-app .s360-shell.collapsed .s360-nav-section-label {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(6px) !important;
}

#system360-app .s360-shell.collapsed .s360-nav-item {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: none !important;
  column-gap: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
}

#system360-app .s360-shell.collapsed .s360-nav-item.active,
#system360-app .s360-shell.collapsed .s360-nav-item:hover {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#system360-app .s360-shell.collapsed .s360-nav-label,
#system360-app .s360-shell.collapsed .s360-nav-meta {
  max-width: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  transform: translateX(8px) !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transition-delay: 0s !important;
}

#system360-app .s360-shell.collapsed .s360-nav-item .s360-nav-icon .s360-svg-icon {
  transform: none !important;
}

#system360-app .s360-shell.collapsed .s360-nav-item > .s360-nav-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 24px !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
}

#system360-app .s360-shell.collapsed .s360-submenu-wrap {
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left-width: 0 !important;
}

#system360-app .s360-shell.collapsed .s360-sidebar-foot {
  padding: 0 !important;
  display: grid !important;
  justify-items: center !important;
}

#system360-app .s360-shell.collapsed .s360-side-userchip {
  width: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
}

#system360-app .s360-shell.collapsed .s360-side-user-meta {
  max-width: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  transform: translateX(8px) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#system360-app .s360-toggle-icon-stack {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-block;
}

#system360-app .s360-toggle-icon {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 230ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

#system360-app .s360-toggle-icon-stack.is-collapsed .s360-toggle-icon.menu {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

#system360-app .s360-toggle-icon-stack.is-collapsed .s360-toggle-icon.close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.72);
}

#system360-app .s360-toggle-icon-stack.is-expanded .s360-toggle-icon.menu {
  opacity: 0;
  transform: rotate(90deg) scale(0.72);
}

#system360-app .s360-toggle-icon-stack.is-expanded .s360-toggle-icon.close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

#system360-app .s360-modal-bg {
  z-index: 12040 !important;
}

/* Modules admin center */
#system360-app .s360-mod-admin {
  display: grid !important;
  gap: 14px !important;
}

#system360-app .s360-mod-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#system360-app .s360-mod-head h3 {
  margin: 0 !important;
  font-size: 27px !important;
  line-height: 1.15 !important;
}

#system360-app .s360-mod-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#system360-app .s360-mod-kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(110px, 1fr)) !important;
  gap: 10px !important;
}

#system360-app .s360-mod-kpi-strip > article {
  border: 1px solid var(--s8-border) !important;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(247, 251, 255, 0.85)) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  display: grid !important;
  gap: 4px !important;
}

#system360-app .s360-mod-kpi-strip > article > span {
  color: var(--s8-soft) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#system360-app .s360-mod-kpi-strip > article > strong {
  font-size: 20px !important;
  color: var(--s8-text) !important;
  letter-spacing: 0.2px !important;
}

#system360-app .s360-mod-toolbar {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 10px !important;
  border: 1px solid var(--s8-border) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.56) !important;
}

#system360-app .s360-mod-view-switch {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#system360-app .s360-mod-toolbar #s360-mod-search {
  flex: 1 1 300px !important;
}

#system360-app .s360-mod-toolbar #s360-mod-filter-status,
#system360-app .s360-mod-toolbar #s360-mod-filter-category,
#system360-app .s360-mod-toolbar #s360-mod-filter-type {
  flex: 0 1 180px !important;
  min-width: 160px !important;
}

#system360-app .s360-mod-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--s8-soft) !important;
}

#system360-app .s360-mod-content {
  animation: s360ModulesSwapIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

#system360-app .s360-mod-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 12px !important;
}

#system360-app .s360-mod-card {
  position: relative !important;
  border: 1px solid rgba(188, 208, 230, 0.88) !important;
  border-radius: 16px !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(245, 250, 255, 0.9)) !important;
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
  box-shadow: 0 12px 26px rgba(47, 94, 167, 0.08) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

#system360-app .s360-mod-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(111, 164, 233, 0.78) !important;
  box-shadow: 0 16px 28px rgba(47, 94, 167, 0.14) !important;
}

#system360-app .s360-mod-card.is-inactive {
  opacity: 0.76 !important;
}

#system360-app .s360-mod-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

#system360-app .s360-mod-card h4 {
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

#system360-app .s360-mod-meta {
  font-size: 12px !important;
  color: var(--s8-soft) !important;
}

#system360-app .s360-mod-top-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#system360-app .s360-mod-dot-btn {
  min-width: 32px !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#system360-app .s360-mod-desc {
  margin: 0 !important;
  color: #274565 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  min-height: 38px !important;
}

#system360-app .s360-mod-kpis {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--s8-soft) !important;
}

#system360-app .s360-mod-quick {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#system360-app .s360-mod-content.is-list .s360-seguimientos-wrap {
  margin-top: 0 !important;
}

#system360-app .s360-mod-table .is-inactive td {
  opacity: 0.72 !important;
}

#system360-app .s360-mod-row-title {
  font-weight: 700 !important;
  color: var(--s8-text) !important;
  line-height: 1.2 !important;
}

#system360-app .s360-mod-row-sub {
  font-size: 12px !important;
  color: var(--s8-soft) !important;
}

#system360-app .s360-mod-row-actions {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

#system360-app .s360-mod-context {
  position: absolute !important;
  right: 10px !important;
  top: 52px !important;
  width: min(250px, calc(100% - 20px)) !important;
  display: grid !important;
  gap: 4px !important;
  border: 1px solid var(--s8-border) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 20px 34px rgba(26, 74, 145, 0.18) !important;
  z-index: 30 !important;
}

#system360-app .s360-mod-context.s360-mod-context-inline {
  right: 0 !important;
  top: calc(100% + 6px) !important;
  width: 210px !important;
}

#system360-app .s360-drop-btn {
  border-radius: 9px !important;
}

#system360-app .s360-mod-editor {
  border: 1px solid var(--s8-border) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  background: linear-gradient(150deg, rgba(251, 253, 255, 0.96), rgba(242, 249, 255, 0.9)) !important;
  display: grid !important;
  gap: 10px !important;
}

#system360-app .s360-mod-editor-modal-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 11035 !important;
  background: rgba(18, 35, 61, 0.38) !important;
  backdrop-filter: blur(4px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

#system360-app .s360-mod-editor-modal {
  width: min(1160px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: auto !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 60px rgba(8, 25, 48, 0.35) !important;
  animation: s360ModulesSwapIn 180ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

#system360-app .s360-mod-editor-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#system360-app .s360-mod-editor-head h4 {
  margin: 0 !important;
  font-size: 19px !important;
}

#system360-app .s360-mod-editor-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#system360-app .s360-mod-editor-status {
  font-size: 12px !important;
  color: var(--s8-soft) !important;
}

#system360-app .s360-mod-subblock {
  border: 1px solid var(--s8-border) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  display: grid !important;
  gap: 8px !important;
}

#system360-app .s360-mod-subblock-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#system360-app .s360-mod-subblock-head h5 {
  margin: 0 !important;
  font-size: 14px !important;
}

#system360-app .s360-mod-inline-wrap {
  display: grid !important;
  gap: 8px !important;
}

#system360-app .s360-mod-sub-item {
  border: 1px solid var(--s8-border) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  display: grid !important;
  gap: 8px !important;
}

#system360-app .s360-mod-sub-item-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#system360-app .s360-mod-sub-bases-panel {
  border: 1px dashed rgba(120, 159, 202, 0.62) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  background: rgba(244, 250, 255, 0.86) !important;
  display: grid !important;
  gap: 8px !important;
}

#system360-app .s360-mod-sub-base-links {
  border: 1px solid rgba(176, 202, 232, 0.72) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  display: grid !important;
  gap: 8px !important;
}

#system360-app .s360-mod-base-link-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 6px !important;
}

#system360-app .s360-mod-base-link-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  border: 1px solid var(--s8-border) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  background: rgba(246, 251, 255, 0.92) !important;
  font-size: 12px !important;
  color: var(--s8-text) !important;
}

#system360-app .s360-mod-vis-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 40px !important;
  border: 1px solid var(--s8-border) !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  background: rgba(250, 253, 255, 0.95) !important;
}

#system360-app .s360-mod-vis-row > div {
  display: grid !important;
  gap: 2px !important;
}

#system360-app .s360-mod-vis-row strong {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#system360-app .s360-mod-vis-row small {
  font-size: 11px !important;
  color: var(--s8-soft) !important;
}

#system360-app .s360-mod-eye-btn.is-visible {
  color: #1e63ad !important;
}

#system360-app .s360-mod-eye-btn.is-hidden {
  color: #7f8ea2 !important;
}

#system360-app .s360-mod-sub-base-row {
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.1fr) minmax(115px, 0.9fr) minmax(115px, 0.9fr) minmax(120px, 0.9fr) minmax(170px, 1.2fr) minmax(170px, 1.2fr) minmax(140px, 1fr) minmax(130px, 1fr) minmax(110px, 0.8fr) minmax(110px, 0.8fr) minmax(150px, 1.1fr) auto !important;
  gap: 6px !important;
  align-items: center !important;
}

#system360-app .s360-mod-inline-grid {
  display: grid !important;
  grid-template-columns: minmax(110px, 1fr) minmax(130px, 1fr) minmax(108px, 1fr) minmax(140px, 1fr) minmax(160px, 1fr) minmax(108px, 1fr) auto !important;
  gap: 6px !important;
  align-items: center !important;
}

#system360-app .s360-mod-inline-grid-bases {
  display: grid !important;
  grid-template-columns: minmax(130px, 1fr) minmax(180px, 1.3fr) minmax(120px, 1fr) minmax(112px, 0.9fr) minmax(170px, 1.2fr) auto !important;
  gap: 6px !important;
  align-items: center !important;
}

#system360-app .s360-btn.small {
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}

@keyframes s360ModulesSwapIn {
  from { opacity: 0.4; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1200px) {
  #system360-app .s360-mod-kpi-strip {
    grid-template-columns: repeat(2, minmax(110px, 1fr)) !important;
  }
  #system360-app .s360-mod-inline-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }
  #system360-app .s360-mod-inline-grid-bases {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }
  #system360-app .s360-mod-sub-base-row {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  #system360-app .s360-mod-toolbar #s360-mod-search,
  #system360-app .s360-mod-toolbar #s360-mod-filter-status,
  #system360-app .s360-mod-toolbar #s360-mod-filter-category,
  #system360-app .s360-mod-toolbar #s360-mod-filter-type {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #system360-app .s360-mod-grid {
    grid-template-columns: 1fr !important;
  }
  #system360-app .s360-mod-inline-grid {
    grid-template-columns: 1fr !important;
  }
  #system360-app .s360-mod-inline-grid-bases {
    grid-template-columns: 1fr !important;
  }
  #system360-app .s360-mod-sub-base-row {
    grid-template-columns: 1fr !important;
  }
  #system360-app .s360-mod-editor-modal-bg {
    padding: 8px !important;
  }
  #system360-app .s360-mod-editor-modal {
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    border-radius: 14px !important;
  }
}

/* Activities module */
#system360-app .s360-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 26px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--s8-border) !important;
  background: rgba(148, 163, 184, 0.12) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#system360-app .s360-chip.is-high { background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.34) !important; color: #9f1239 !important; }
#system360-app .s360-chip.is-medium { background: rgba(245, 158, 11, 0.16) !important; border-color: rgba(245, 158, 11, 0.34) !important; color: #92400e !important; }
#system360-app .s360-chip.is-low { background: rgba(16, 185, 129, 0.14) !important; border-color: rgba(16, 185, 129, 0.3) !important; color: #065f46 !important; }
#system360-app .s360-chip.state-pendiente { background: rgba(148, 163, 184, 0.18) !important; }
#system360-app .s360-chip.state-en_proceso { background: rgba(234, 179, 8, 0.18) !important; border-color: rgba(234, 179, 8, 0.34) !important; color: #854d0e !important; }
#system360-app .s360-chip.state-completado { background: rgba(34, 197, 94, 0.16) !important; border-color: rgba(34, 197, 94, 0.32) !important; color: #166534 !important; }
#system360-app .s360-chip.state-atrasado { background: rgba(239, 68, 68, 0.16) !important; border-color: rgba(239, 68, 68, 0.34) !important; color: #991b1b !important; }

#system360-app .s360-activity-row.is-current {
  background: rgba(10, 132, 255, 0.08) !important;
}

#system360-app .s360-activity-progress {
  width: 100% !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.2) !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
}

#system360-app .s360-activity-progress-fill {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #0a84ff, #34c759) !important;
}

#system360-app .s360-activity-state-select {
  width: auto !important;
  min-width: 148px !important;
  flex: 0 0 148px !important;
}

#system360-app .s360-activity-kanban {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

#system360-app .s360-activity-kanban-col {
  border: 1px solid var(--s8-border) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  min-height: 260px !important;
}

#system360-app .s360-activity-kanban-col > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

#system360-app .s360-activity-kanban-list {
  display: grid !important;
  gap: 8px !important;
}

#system360-app .s360-activity-kanban-card {
  border: 1px solid var(--s8-border) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  background: var(--s8-surface) !important;
  display: grid !important;
  gap: 8px !important;
}

#system360-app .s360-activity-kanban-card.is-current {
  border-color: rgba(10, 132, 255, 0.4) !important;
  box-shadow: 0 10px 22px rgba(10, 132, 255, 0.18) !important;
}

#system360-app .s360-activity-kanban-card h4 {
  margin: 0 !important;
  font-size: 14px !important;
}

#system360-app .s360-activity-kanban-time {
  font-size: 12px !important;
  color: var(--s8-soft) !important;
}

#system360-app .s360-activity-timeline .s360-timeline-item.is-current {
  border-radius: 10px !important;
  background: rgba(10, 132, 255, 0.08) !important;
  padding: 8px !important;
}

#system360-app .s360-dot.s360-dot-verde { background: #22c55e !important; }
#system360-app .s360-dot.s360-dot-amarillo { background: #f59e0b !important; }
#system360-app .s360-dot.s360-dot-rojo { background: #ef4444 !important; }

@media (max-width: 1100px) {
  #system360-app .s360-activity-kanban { grid-template-columns: 1fr !important; }
}

/* Global floating notifications (iOS-like stacked cards) */
#system360-app .s360-toast-stack {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 11050 !important;
  width: min(380px, calc(100vw - 16px)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0 !important;
  pointer-events: none !important;
}

#system360-app .s360-toast {
  pointer-events: auto !important;
  position: relative !important;
  width: 100% !important;
  margin-top: -34px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  background: linear-gradient(145deg, rgba(0, 54, 142, 0.90), rgba(0, 116, 214, 0.86)) !important;
  color: #f4f9ff !important;
  box-shadow: 0 22px 44px rgba(0, 36, 96, 0.38) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  padding: 14px 38px 14px 14px !important;
  transform: translateY(calc(var(--s360-toast-index, 0) * -4px)) scale(calc(1 - (var(--s360-toast-index, 0) * 0.02))) !important;
  opacity: calc(1 - (var(--s360-toast-index, 0) * 0.09)) !important;
  transition: opacity .28s ease, transform .28s ease, filter .28s ease !important;
  animation: s360ToastIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#system360-app .s360-toast:first-child { margin-top: 0 !important; }

#system360-app .s360-toast.is-hiding {
  opacity: 0 !important;
  transform: translateY(18px) scale(.96) !important;
  filter: saturate(.84) !important;
}

#system360-app .s360-toast > header {
  margin: 0 0 4px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: .1px !important;
  color: #ffffff !important;
}

#system360-app .s360-toast > p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: rgba(240, 248, 255, 0.96) !important;
  cursor: pointer !important;
}

#system360-app .s360-toast.s360-toast-late {
  background: linear-gradient(145deg, rgba(118, 36, 0, 0.91), rgba(206, 74, 19, 0.88)) !important;
}
#system360-app .s360-toast.s360-toast-success {
  background: linear-gradient(145deg, rgba(5, 108, 65, 0.90), rgba(22, 163, 74, 0.86)) !important;
}
#system360-app .s360-toast.s360-toast-suggestion {
  background: linear-gradient(145deg, rgba(0, 76, 122, 0.90), rgba(0, 132, 201, 0.86)) !important;
}

#system360-app .s360-toast-close {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#system360-app .s360-toast-close:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}

@media (max-width: 760px) {
  #system360-app .s360-toast-stack {
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    bottom: 10px !important;
  }
  #system360-app .s360-toast {
    margin-top: -26px !important;
    border-radius: 16px !important;
  }
}

@keyframes s360ToastIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #system360-app .s360-workarea,
  #system360-app .s360-sidebar,
  #system360-app .s360-side-toggle,
  #system360-app .s360-nav-item,
  #system360-app .s360-nav-label,
  #system360-app .s360-nav-meta,
  #system360-app .s360-submenu-wrap,
  #system360-app .s360-side-user-meta,
  #system360-app .s360-toggle-icon {
    transition: none !important;
    animation: none !important;
  }
}