:root {
  --solviun-safe-top: env(safe-area-inset-top, 0px);
  --solviun-safe-right: env(safe-area-inset-right, 0px);
  --solviun-safe-bottom: env(safe-area-inset-bottom, 0px);
  --solviun-safe-left: env(safe-area-inset-left, 0px);
}

html {
  min-height: 100%;
  background: #111d36;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

@media (display-mode: standalone) {
  body {
    padding-top: var(--solviun-safe-top);
    padding-right: var(--solviun-safe-right);
    padding-left: var(--solviun-safe-left);
  }

  body::after {
    content: "";
    position: fixed;
    z-index: 2147483646;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--solviun-safe-bottom);
    background: #111d36;
    pointer-events: none;
  }
}

@media (max-width: 43.75rem) {
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }

  dialog,
  [role="dialog"] {
    max-height: calc(
      100dvh - var(--solviun-safe-top) - var(--solviun-safe-bottom)
    );
  }

  button,
  [role="button"],
  input[type="button"],
  input[type="submit"] {
    touch-action: manipulation;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Shell premium depth · menús · 2026-09-16v
   Profundidad en sidebar + chrome. Misma familia en todos los módulos.
   No toca gutter de página ni bordes canónicos de cabecera.
   ══════════════════════════════════════════════════════════════════════════ */

.crm-shell {
  --shell-depth-1: 0 8px 24px rgb(4 12 28 / 28%);
  --shell-depth-2: 0 14px 36px rgb(4 12 28 / 36%);
  --shell-inset: inset 0 1px 0 rgb(255 255 255 / 14%);
  --shell-well: color-mix(in srgb, #04101f 55%, transparent);
}

/* ── Sidebar: plano de acero con capas ──────────────────────────────────── */
.crm-shell .sidebar {
  /* width: keep layout gutter */
  background:
    radial-gradient(120% 55% at 8% -8%, color-mix(in srgb, var(--solviun-brand-mark-start, #0a8bd8) 48%, transparent), transparent 58%),
    radial-gradient(90% 50% at 110% 18%, color-mix(in srgb, var(--solviun-brand-mark-end, #18a59f) 22%, transparent), transparent 62%),
    radial-gradient(80% 40% at 40% 110%, color-mix(in srgb, #6f45e8 14%, transparent), transparent 55%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--solviun-steel-top, #15233f) 92%, white) 0%,
      var(--solviun-steel-top, #15233f) 28%,
      var(--solviun-steel-mid, #101a30) 72%,
      var(--solviun-steel-deep, #0a1222) 100%) !important;
  box-shadow:
    inset 3px 0 0 0 color-mix(in srgb, var(--solviun-brand-mark-start, #0a8bd8) 70%, #75d8ff),
    inset -1px 0 0 rgb(255 255 255 / 6%),
    18px 0 48px rgb(2 8 20 / 42%) !important;
  border-right: 0 !important;
}

.crm-shell .brand {
  height: 92px !important;
  padding: 0 20px !important;
  border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 7%), transparent 70%) !important;
  box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
  position: relative;
  z-index: 2;
}
.crm-shell .brand-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgb(255 255 255 / 55%) !important;
  background:
    linear-gradient(145deg, #5cc8ff, var(--solviun-brand-mark-start, #0a8bd8) 45%, var(--solviun-brand-mark-end, #18a59f)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 55%),
    0 10px 22px color-mix(in srgb, var(--solviun-brand-mark-start, #0a8bd8) 45%, transparent) !important;
  font-weight: 800 !important;
}
.crm-shell .brand strong {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #f7faff !important;
}
.crm-shell .brand span {
  color: color-mix(in srgb, #c9d6ea 75%, transparent) !important;
}

/* Grupos: pozos con profundidad */
.crm-shell .sidebar .nav-group {
  margin: 10px 0 !important;
  padding: 8px 6px 10px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(0 0 0 / 12%)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    inset 0 -1px 0 rgb(0 0 0 / 22%),
    0 8px 20px rgb(0 0 0 / 12%) !important;
  border: 1px solid rgb(255 255 255 / 6%) !important;
}
.crm-shell .sidebar .nav-group + .nav-group {
  border-top: 0 !important;
  margin-top: 12px !important;
}
.crm-shell .sidebar .nav-group > p {
  margin: 4px 6px 8px !important;
  padding: 4px 10px !important;
  background: transparent !important;
  color: color-mix(in srgb, #9eb4d0 88%, #fff) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
.crm-shell .sidebar .nav-group > p:after {
  background: linear-gradient(90deg, color-mix(in srgb, #9eb4d0 35%, transparent), transparent) !important;
  opacity: 0.7;
}

.crm-shell .sidebar nav {
  padding: 14px 12px 20px !important;
  gap: 4px !important;
}

/* Items: material idle / hover / active */
.crm-shell .sidebar nav button {
  min-height: 44px !important;
  margin: 2px 0 !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: color-mix(in srgb, #d7e3f4 88%, #fff) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}
.crm-shell .sidebar nav button > svg {
  width: 30px !important;
  height: 30px !important;
  padding: 6px !important;
  border-radius: 10px !important;
  border: 1px solid rgb(255 255 255 / 10%) !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%)) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%) !important;
  color: #c5d6ea !important;
}
.crm-shell .sidebar nav button:hover {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 3%)) !important;
  border-color: rgb(255 255 255 / 10%) !important;
  color: #fff !important;
  transform: translateX(2px) !important;
  box-shadow: 0 8px 18px rgb(0 0 0 / 18%) !important;
}
.crm-shell .sidebar nav button:hover > svg {
  border-color: color-mix(in srgb, var(--solviun-brand-mark-start, #0a8bd8) 50%, transparent) !important;
  background: color-mix(in srgb, var(--solviun-brand-mark-start, #0a8bd8) 28%, transparent) !important;
  color: #fff !important;
  transform: none !important;
}

/* Activo: tarjeta elevada dentro del menú */
.crm-shell .sidebar nav button.active {
  background:
    linear-gradient(115deg, rgb(255 255 255 / 14%) 0%, transparent 42%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--solviun-brand-mark-start, #0a8bd8) 34%, transparent),
      color-mix(in srgb, var(--solviun-brand-mark-end, #18a59f) 12%, transparent) 55%,
      rgb(255 255 255 / 4%) 100%) !important;
  border: 1px solid color-mix(in srgb, #75d8ff 55%, transparent) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 12px 28px color-mix(in srgb, var(--solviun-brand-mark-start, #0a8bd8) 32%, transparent),
    0 4px 12px rgb(0 0 0 / 25%) !important;
  transform: none !important;
}
.crm-shell .sidebar nav button.active:before {
  content: "" !important;
  position: absolute !important;
  inset-block: 8px !important;
  left: 0 !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: linear-gradient(180deg, #7ee0ff, #3d9fff 40%, #18a59f) !important;
  box-shadow: 0 0 12px color-mix(in srgb, #5cc8ff 70%, transparent) !important;
}
.crm-shell .sidebar nav button.active > svg {
  border-color: transparent !important;
  background: linear-gradient(145deg, #5cc8ff, var(--solviun-brand-mark-start, #0a8bd8)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 45%),
    0 8px 16px color-mix(in srgb, var(--solviun-brand-mark-start, #0a8bd8) 40%, transparent) !important;
}

/* Footer notificaciones */
.crm-shell .sidebar-foot {
  padding: 12px 12px 16px !important;
  border-top: 1px solid rgb(255 255 255 / 8%) !important;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 22%)) !important;
}
.crm-shell .sidebar-foot button {
  min-height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid rgb(255 255 255 / 8%) !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%)) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%) !important;
  color: #e8eef8 !important;
  font-weight: 700 !important;
}
.crm-shell .sidebar-foot button:hover {
  border-color: color-mix(in srgb, #75d8ff 35%, transparent) !important;
  background: color-mix(in srgb, var(--solviun-brand-mark-start, #0a8bd8) 18%, transparent) !important;
}
.crm-shell .sidebar-foot button svg {
  border: 1px solid rgb(255 255 255 / 12%) !important;
  border-radius: 10px !important;
  background: rgb(255 255 255 / 6%) !important;
  padding: 6px !important;
}

/* ── Top chrome: barra con profundidad ──────────────────────────────────── */
.crm-shell .topbar,
.crm-shell header.app-top,
.crm-shell .app-topbar,
.crm-shell .shell-topbar,
.crm-shell .crm-topbar {
  background:
    linear-gradient(180deg, #ffffff, #f3f6fb) !important;
  border-bottom: 1px solid color-mix(in srgb, #9aadc6 28%, transparent) !important;
  box-shadow: 0 10px 28px rgb(12 28 58 / 6%) !important;
}

/* Buscador global: pozo elevado */
.crm-shell :is(.global-search, .top-search, .app-search, [class*="command-search"], .search-trigger) {
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 8px 22px rgb(12 28 58 / 8%) !important;
}

/* Lienzo principal: leve profundidad bajo el menú */
.crm-shell > main,
.crm-shell .app-column > main,
.crm-shell .content-column {
  background:
    radial-gradient(90% 50% at 0% 0%, color-mix(in srgb, #0a8bd8 6%, transparent), transparent 50%),
    linear-gradient(180deg, #eef3f9 0%, #f7f9fc 40%, #fbfcfe 100%) !important;
}

/* Restore content gutter after sidebar depth · 2026-09-16v2 */
.crm-shell .sidebar {
  width: 260px !important;
}