/* T060 - Armazon: barra superior + rail de navegacion + flyout de modulos.
   Tells prescriptivos: shell-anatomy.md. */

.d365-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: var(--m365-font-family);
}

/* ---------- Barra superior ---------- */

.d365-topbar {
  height: var(--m365-topbar-height);
  min-height: var(--m365-topbar-height);
  background: var(--m365-topbar-bg);
  color: var(--m365-topbar-fg);
  display: flex;
  align-items: center;
  padding: 0 var(--m365-space-3);
  gap: var(--m365-space-3);
  z-index: var(--m365-z-flyout);
  position: relative;
}

.d365-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--m365-space-3);
  min-width: 0;
  flex: 0 0 auto;
}

/* ---------- Caja de busqueda global (F04, uat-01/05/06/10/12) ---------- */

.d365-topbar-search {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.d365-topbar-search-box {
  position: relative;
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
}

.d365-topbar-search-icon {
  position: absolute;
  left: 9px;
  color: rgba(255, 255, 255, 0.65);
  pointer-events: none;
}

.d365-topbar-search-input {
  width: 100%;
  height: 30px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--m365-radius-sm);
  color: #ffffff;
  padding: 0 var(--m365-space-2) 0 30px;
  font-size: var(--m365-fs-body);
  font-family: inherit;
}

.d365-topbar-search-input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.d365-topbar-search-input:focus {
  outline: 2px solid var(--m365-accent-100);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.d365-topbar-product {
  font-size: var(--m365-fs-body-lg);
  font-weight: var(--m365-fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.d365-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--m365-space-2);
  flex: 0 0 auto;
}

/* Todo boton del cumulo superior: glifo blanco, fondo transparente, hover tenue
   (shell-anatomy.md) - waffle, campana y avatar comparten el mismo tratamiento. */
.d365-topbar-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--m365-radius-sm);
  background: transparent;
  color: var(--m365-topbar-fg);
  font-size: 16px;
}

.d365-topbar-icon:hover {
  background: var(--m365-topbar-icon-hover);
}

.d365-waffle {
  display: grid;
  grid-template-columns: repeat(3, 3px);
  grid-template-rows: repeat(3, 3px);
  gap: 2px;
}

.d365-waffle-dot {
  width: 3px;
  height: 3px;
  background: #ffffff;
  border-radius: 1px;
}

.d365-icon-bell {
  line-height: 1;
}

.d365-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--m365-accent-100);
  color: #ffffff;
  font-size: 10px;
  font-weight: var(--m365-fw-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.d365-account {
  position: relative;
}

.d365-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--m365-accent-140);
  color: var(--m365-accent-10);
  font-size: 12px;
  font-weight: var(--m365-fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Sin sesion: gris neutro, glifo de persona — nunca un "?" con color de acento que
   sugiera una identidad real (F04). T091: SI es interactivo (dispara el inicio de
   sesion), por eso cursor:pointer en vez de default — lo que se evita es el COLOR de
   una identidad real, no la interaccion en si. */
.d365-avatar.is-disabled,
.d365-avatar:disabled {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.d365-avatar:disabled {
  cursor: default;
}

/* ---------- Pastilla de compania ---------- */

.d365-company-pill {
  position: relative;
}

.d365-company-pill-button {
  display: inline-flex;
  align-items: center;
  gap: var(--m365-space-1);
  height: 28px;
  padding: 0 var(--m365-space-2);
  background: transparent;
  border: 1px solid var(--m365-topbar-pill-border);
  border-radius: var(--m365-radius-sm);
  color: var(--m365-topbar-fg);
  font-size: var(--m365-fs-body);
  max-width: 260px;
}

.d365-company-pill-button:hover {
  background: var(--m365-topbar-icon-hover);
}

/* Sin sesion: deshabilitada en gris, nunca un guion suelto (F04). */
.d365-company-pill-button.is-disabled,
.d365-company-pill-button:disabled {
  color: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.15);
  cursor: default;
}

.d365-company-pill-button.is-disabled:hover,
.d365-company-pill-button:disabled:hover {
  background: transparent;
}

.d365-company-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d365-company-pill-chevron {
  font-size: 11px;
  opacity: 0.85;
}

.d365-company-pill-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--m365-surface-card);
  border: 1px solid var(--m365-stroke-divider);
  border-radius: var(--m365-radius-sm);
  box-shadow: var(--m365-shadow-flyout);
  list-style: none;
  margin: 0;
  padding: var(--m365-space-1) 0;
  z-index: var(--m365-z-flyout);
}

.d365-company-pill-option {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--m365-space-2) var(--m365-space-3);
  background: transparent;
  border: none;
  text-align: left;
  color: var(--m365-text-primary);
  font-size: var(--m365-fs-body);
}

.d365-company-pill-option strong {
  color: var(--m365-text-link);
  font-weight: var(--m365-fw-semibold);
}

.d365-company-pill-option:hover,
.d365-company-pill-option.is-selected {
  background: var(--m365-surface-selected);
}

/* ---------- Tarjeta de cuenta (uat-13) ---------- */

.d365-account-card {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  background: var(--m365-surface-card);
  border: 1px solid var(--m365-stroke-divider);
  border-radius: var(--m365-radius-sm);
  box-shadow: var(--m365-shadow-flyout);
  padding: var(--m365-space-3);
  z-index: var(--m365-z-flyout);
  color: var(--m365-text-primary);
}

.d365-account-card-name {
  font-weight: var(--m365-fw-semibold);
  font-size: var(--m365-fs-body-lg);
}

.d365-account-card-email {
  color: var(--m365-text-secondary);
  font-size: var(--m365-fs-caption);
  margin-top: 2px;
}

.d365-account-card-signout {
  margin-top: var(--m365-space-3);
  border: 1px solid var(--m365-stroke-divider);
  border-radius: var(--m365-radius-sm);
}

.d365-account-card-signout-link {
  width: 100%;
  padding: var(--m365-space-2);
  background: transparent;
  border: none;
  color: var(--m365-text-link);
  text-align: center;
  font-size: var(--m365-fs-body);
}

.d365-account-card-signout-link:hover {
  background: var(--m365-surface-hover);
}

/* ---------- Cuerpo del armazon: rail + contenido ---------- */

.d365-shell-body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.d365-shell-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--m365-surface-page);
}

/* ---------- Rail de navegacion ---------- */

.d365-navrail {
  flex-shrink: 0;
  display: flex;
  position: relative;
  z-index: var(--m365-z-flyout);
}

.d365-navrail-icons {
  width: var(--m365-navpane-rail-width);
  background: var(--m365-navpane-bg);
  border-right: 1px solid var(--m365-navpane-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--m365-space-2);
  gap: var(--m365-space-1);
}

.d365-navrail-icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--m365-navpane-text);
  border-radius: var(--m365-radius-sm);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.d365-navrail-icon-btn:hover {
  background: var(--m365-surface-hover);
}

.d365-navrail-icon-btn.is-active {
  color: var(--m365-navpane-active-fg);
  background: var(--m365-navpane-active-bg);
}

.d365-navrail-hamburger {
  margin-bottom: var(--m365-space-2);
}

/* Panel expandido: overlay sobre el contenido, NO lo empuja (shell-anatomy.md). */
.d365-navrail-pane {
  position: absolute;
  top: 0;
  left: var(--m365-navpane-rail-width);
  width: calc(var(--m365-navpane-expanded-width) - var(--m365-navpane-rail-width));
  bottom: 0;
  background: var(--m365-navpane-bg);
  border-right: 1px solid var(--m365-navpane-border);
  box-shadow: var(--m365-shadow-flyout);
  overflow-y: auto;
  padding: var(--m365-space-2) 0;
}

.d365-navrail-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--m365-space-2);
  padding: var(--m365-space-2) var(--m365-space-3);
  background: transparent;
  border: none;
  text-align: left;
  color: var(--m365-navpane-text);
  font-size: var(--m365-fs-body);
}

.d365-navrail-item:hover {
  background: var(--m365-surface-hover);
}

.d365-navrail-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--m365-space-2);
  padding: var(--m365-space-2) var(--m365-space-3);
  background: transparent;
  border: none;
  text-align: left;
  color: var(--m365-navpane-text);
  font-size: var(--m365-fs-body);
}

.d365-navrail-section-header:hover {
  background: var(--m365-surface-hover);
}

.d365-navrail-chevron {
  display: inline-block;
  transition: transform 0.1s ease;
  font-size: 11px;
}

.d365-navrail-chevron.is-open {
  transform: rotate(180deg);
}

.d365-navrail-item-list,
.d365-navrail-module-list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--m365-space-2);
}

.d365-navrail-subitem,
.d365-navrail-module-item {
  width: 100%;
  display: block;
  padding: var(--m365-space-2) var(--m365-space-3) var(--m365-space-2) 44px;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--m365-text-link);
  font-size: var(--m365-fs-body);
}

.d365-navrail-subitem:hover,
.d365-navrail-module-item:hover {
  background: var(--m365-surface-hover);
  text-decoration: underline;
}

.d365-navrail-module-item.is-active {
  color: var(--m365-navpane-active-fg);
  font-weight: var(--m365-fw-semibold);
  background: var(--m365-navpane-active-bg);
}

.d365-navrail-section-empty {
  margin: 0;
  padding: 0 var(--m365-space-3) var(--m365-space-2) 44px;
  color: var(--m365-text-secondary);
  font-size: var(--m365-fs-caption);
}

/* ---------- Flyout de contenido de modulo / megamenu (uat-10) ---------- */

/* F02: el panel expandido de 250px permanece ABIERTO (con el modulo activo resaltado
   dentro de la lista de Modulos) mientras el megamenu esta abierto; el megamenu se
   ancla a la DERECHA de ese panel, nunca pegado al rail colapsado de 48px. NavRail
   mantiene _paneOpen=true y _openSection=ModulesKey durante SelectModule(). */
.d365-module-flyout {
  position: fixed;
  top: var(--m365-topbar-height);
  bottom: 0;
  left: var(--m365-navpane-expanded-width);
  right: 0;
  background: var(--m365-surface-card);
  border-top: 1px solid var(--m365-stroke-divider);
  box-shadow: var(--m365-shadow-flyout);
  overflow-y: auto;
  padding: var(--m365-space-4);
  z-index: calc(var(--m365-z-flyout) - 1);
}

.d365-module-flyout-toolbar {
  display: flex;
  gap: var(--m365-space-4);
  border-bottom: 1px solid var(--m365-stroke-divider);
  padding-bottom: var(--m365-space-3);
  margin-bottom: var(--m365-space-3);
}

.d365-module-flyout-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--m365-space-1);
  background: transparent;
  border: none;
  color: var(--m365-text-link);
  font-size: var(--m365-fs-body);
  padding: var(--m365-space-1) 0;
}

.d365-module-flyout-toolbar-btn:hover {
  text-decoration: underline;
}

.d365-module-flyout-columns {
  columns: 4 220px;
  column-gap: var(--m365-space-5);
}

.d365-module-flyout-group {
  break-inside: avoid;
  margin-bottom: var(--m365-space-4);
}

.d365-module-flyout-group-header {
  display: flex;
  align-items: center;
  gap: var(--m365-space-1);
  background: transparent;
  border: none;
  padding: 0 0 var(--m365-space-2);
  color: var(--m365-text-secondary);
  font-size: var(--m365-fs-caption);
  font-weight: var(--m365-fw-semibold);
}

.d365-module-flyout-chevron {
  display: inline-block;
  transition: transform 0.1s ease;
  font-size: 10px;
}

.d365-module-flyout-chevron.is-open {
  transform: rotate(180deg);
}

.d365-module-flyout-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--m365-space-2);
}

.d365-module-flyout-items a {
  color: var(--m365-text-link);
  font-size: var(--m365-fs-body);
}

/* ---------- Responsive (T165, adelantado aqui para el rail) ---------- */

@media (max-width: 640px) {
  .d365-navrail-pane {
    width: calc(100vw - var(--m365-navpane-rail-width));
  }

  /* Debajo de 640px el panel expandido ya ocupa casi todo el ancho (regla de arriba);
     mantener el megamenu a la derecha de un panel de ese tamano no cabe, asi que en
     movil vuelve a anclarse junto al rail — no hay referencia uat-* de este caso, es
     una degradacion deliberada, no una regresion del fix de escritorio (F02). */
  .d365-module-flyout {
    left: var(--m365-navpane-rail-width);
  }

  .d365-module-flyout-columns {
    columns: 1;
  }

  .d365-topbar-product {
    max-width: 40vw;
  }
}