/* ==========================================================================
   Dragon Global Trade — shell adaptativo (M3 window size classes: compact < 600 · medium 600–839 · expanded ≥ 840)
   compact: barra inferior  →  medium: riel  →  expanded: panel lateral
   ========================================================================== */
.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.app__body { min-width: 0; display: flex; flex-direction: column; min-height: 100dvh; }
.main { flex: 1; padding: var(--ref-space-6) var(--page-pad) calc(var(--tabbar-h) + var(--ref-space-8) + env(safe-area-inset-bottom)); outline: none; }
.main__inner { max-width: var(--content-max); margin-inline: auto; width: 100%; }
.screen-enter { animation: dgt-screen var(--dur-enter) var(--ease-enter); }
@keyframes dgt-screen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.app--bare .main { padding: 0; }
.app--bare .main__inner { max-width: none; }
.app.app--bare .sidenav, .app.app--bare .tabbar, .app.app--bare .topbar { display: none; }
.app.app--bare { grid-template-columns: minmax(0, 1fr); }

/* ---------- Barra superior (material translúcido: solo aquí y en la barra inferior) ---------- */
.topbar { position: sticky; inset-block-start: 0; z-index: var(--z-topbar); height: var(--topbar-h); display: flex; align-items: center; gap: var(--ref-space-3); padding-inline: var(--ref-space-4); background: var(--sys-bar-bg); border-block-end: 1px solid var(--sys-bar-border); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .topbar, .tabbar { background: var(--sys-surface); } }
@media (min-width: 600px) { .topbar { padding-inline: var(--ref-space-7); } }
.topbar__brand { display: flex; align-items: center; gap: var(--ref-space-3); color: var(--sys-text); text-decoration: none; min-height: var(--tap); }
.topbar__brand { min-width: var(--tap); justify-content: center; }
.topbar__brand img, .topbar__brand svg { width: 36px; height: 36px; }
@media (min-width: 600px) { .topbar__brand { display: none; } }
.topbar__search { flex: 0 1 420px; display: none; min-width: 0; }
.searchbtn { display: flex; align-items: center; gap: var(--ref-space-3); width: 100%; min-height: var(--tap); padding: 0 var(--ref-space-4); border-radius: var(--ref-radius-pill); border: 1px solid var(--sys-border-strong); background: var(--sys-surface); color: var(--sys-text-2); text-align: start; font-size: var(--type-body-m-size); }
.searchbtn:hover { border-color: var(--sys-text-2); }
.searchbtn__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 840px) { .topbar__search { display: block; } .topbar__searchicon { display: none; } }
.topbar__spacer { flex: 1; }
.topbar__tools { display: flex; align-items: center; gap: var(--ref-space-2); }
.tenantbtn { display: none; align-items: center; gap: var(--ref-space-3); min-height: var(--tap); padding: 0 var(--ref-space-4); border-radius: var(--ref-radius-pill); border: 1px solid var(--sys-border-strong); background: var(--sys-surface); font-size: var(--type-label-l-size); font-weight: 600; max-width: 260px; }
.tenantbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 840px) { .tenantbtn { display: inline-flex; } }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: none; color: var(--sys-text); }
.iconbtn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sys-state-layer); opacity: 0; transition: opacity var(--ref-dur-fast); }
.iconbtn:hover::after { opacity: var(--sys-state-hover); } .iconbtn:active::after { opacity: var(--sys-state-press); }
.iconbtn .count { position: absolute; inset-block-start: 2px; inset-inline-end: 0; }
.iconbtn--tool { display: none; } @media (min-width: 600px) { .iconbtn--tool { display: inline-grid; } }
.profilebtn { display: inline-flex; align-items: center; gap: var(--ref-space-3); min-height: var(--tap); padding: 0 4px; border-radius: var(--ref-radius-pill); border: 0; background: none; color: var(--sys-text); }
.profilebtn__txt { display: none; text-align: start; line-height: 1.2; }
.profilebtn__name { font-size: var(--type-label-l-size); font-weight: 650; display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profilebtn__role { font-size: var(--type-label-s-size); color: var(--sys-text-2); display: block; }
@media (min-width: 1100px) { .profilebtn__txt { display: block; } }

/* ---------- Navegación: panel lateral / riel ---------- */
.sidenav { display: none; position: sticky; inset-block-start: 0; height: 100vh; height: 100dvh; background: var(--sys-surface); border-inline-end: 1px solid var(--sys-border); z-index: var(--z-nav); flex-direction: column; padding: var(--ref-space-5) var(--ref-space-4); gap: var(--ref-space-4); overflow-y: auto; overscroll-behavior: contain; }
.sidenav__brand { display: flex; align-items: center; gap: var(--ref-space-4); padding: var(--ref-space-2) var(--ref-space-3); color: var(--sys-text); text-decoration: none; min-height: 48px; }
.sidenav__brand svg, .sidenav__brand img { width: 40px; height: 40px; flex: none; }
.sidenav__brandtxt { display: flex; flex-direction: column; line-height: 1.15; }
.sidenav__brandname { font-family: var(--font-display); font-weight: 650; font-size: 1.05rem; letter-spacing: -.005em; }
.sidenav__brandsub { font-size: var(--type-label-s-size); color: var(--sys-text-2); }
.sidenav__nav { display: flex; flex-direction: column; gap: var(--ref-space-5); flex: 1; }
.sidenav__section { display: flex; flex-direction: column; gap: 2px; }
.sidenav__title { padding: 0 var(--ref-space-4); margin-block-end: var(--ref-space-2); font-size: var(--type-label-s-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sys-text-2); }
:lang(zh) .sidenav__title { text-transform: none; letter-spacing: 0; }
.navlink { position: relative; display: flex; align-items: center; gap: var(--ref-space-4); min-height: var(--tap); padding: 4px var(--ref-space-4); border-radius: var(--ref-radius-pill); color: var(--sys-text-2); text-decoration: none; font-weight: 600; font-size: var(--type-label-l-size); }
.navlink:hover { background: var(--sys-surface-1); color: var(--sys-text); text-decoration: none; }
.navlink[aria-current="page"] { background: var(--sys-primary-container); color: var(--sys-on-primary-container); }
.navlink__label { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: normal; line-height: 1.2; } /* hasta 2 líneas: «Historique des modifications» (fr) y «Acompanhamento de projetos» (pt) se leen completos en el panel */
.navlink .count { margin-inline-start: auto; }
.sidenav__foot { display: flex; flex-direction: column; gap: var(--ref-space-3); padding-block-start: var(--ref-space-4); border-block-start: 1px solid var(--sys-border); }
.sidenav__demo { font-size: var(--type-label-s-size); color: var(--sys-text-2); padding: 0 var(--ref-space-3); }
@media (min-width: 600px) { .app { grid-template-columns: var(--rail-w) minmax(0, 1fr); } .sidenav { display: flex; } .main { padding-block-end: var(--ref-space-9); } .tabbar { display: none !important; } }
/* Riel (medium): icono sobre etiqueta */
@media (min-width: 600px) and (max-width: 839.98px) {
  .sidenav { padding-inline: var(--ref-space-2); align-items: stretch; }
  .sidenav__brandtxt, .sidenav__title, .sidenav__demo { display: none; }
  .sidenav__brand { justify-content: center; padding: 0; }
  .navlink { flex-direction: column; justify-content: center; gap: 2px; padding: var(--ref-space-2) 2px; border-radius: var(--ref-radius-lg); min-height: 56px; font-size: 11px; text-align: center; line-height: 1.15; }
  .navlink__label { flex: none; white-space: normal; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 3; overflow-wrap: anywhere; hyphens: auto; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
  .navlink .count { position: absolute; inset-block-start: 2px; inset-inline-end: 6px; }
  .sidenav__nav { gap: var(--ref-space-3); }
  .sidenav__section + .sidenav__section { border-block-start: 1px solid var(--sys-border); padding-block-start: var(--ref-space-3); }
  .sidenav__collapse { display: none; }
}
@media (min-width: 840px) { .app { grid-template-columns: var(--nav-w) minmax(0, 1fr); } }
.sidenav__collapse { display: none; }
@media (min-width: 840px) { .sidenav__collapse { display: inline-flex; align-self: flex-start; } }
/* Panel lateral colapsado a riel por preferencia (expanded) */
@media (min-width: 840px) {
  .app[data-nav="rail"] { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .app[data-nav="rail"] .sidenav { padding-inline: var(--ref-space-2); }
  .app[data-nav="rail"] .sidenav__brandtxt, .app[data-nav="rail"] .sidenav__title, .app[data-nav="rail"] .sidenav__demo { display: none; }
  .app[data-nav="rail"] .sidenav__brand { justify-content: center; padding: 0; }
  .app[data-nav="rail"] .navlink { flex-direction: column; justify-content: center; gap: 2px; padding: var(--ref-space-2) 2px; border-radius: var(--ref-radius-lg); min-height: 56px; font-size: 11px; text-align: center; line-height: 1.15; }
  .app[data-nav="rail"] .navlink__label { flex: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; overflow-wrap: anywhere; hyphens: auto; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
  .app[data-nav="rail"] .navlink .count { position: absolute; inset-block-start: 2px; inset-inline-end: 6px; }
  .app[data-nav="rail"] .sidenav__collapse { align-self: center; }
}

/* ---------- Barra inferior (compact) ---------- */
.tabbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-nav); display: flex; justify-content: space-around; align-items: stretch; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 4px var(--ref-space-2) env(safe-area-inset-bottom); background: var(--sys-bar-bg); border-block-start: 1px solid var(--sys-bar-border); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
.tabbar__item { flex: 1 1 0; min-width: var(--tap); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; color: var(--sys-text-2); text-decoration: none; font-size: 11px; font-weight: 600; border-radius: var(--ref-radius-lg); position: relative; padding: 0 2px; }
.tabbar__pill { display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--ref-radius-pill); transition: background var(--ref-dur-fast); }
.tabbar__item[aria-current="page"] { color: var(--sys-text); }
.tabbar__item[aria-current="page"] .tabbar__pill { background: var(--sys-primary-container); color: var(--sys-on-primary-container); }
.tabbar__label { max-width: 100%; min-width: 0; overflow: hidden; white-space: normal; text-align: center; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: normal; word-break: keep-all; hyphens: none; font-size: 10px; letter-spacing: -.01em; } /* 10 pt como la barra de pestañas de iOS; nunca parte una palabra (WCAG 1.4.4 se mantiene: el texto escala con el zoom) */
:lang(zh) .tabbar__label { word-break: normal; letter-spacing: 0; }
.tabbar .count { position: absolute; inset-block-start: 4px; inset-inline-start: calc(50% + 8px); }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ref-space-3); }
.more-grid .navlink { flex-direction: column; justify-content: center; text-align: center; border-radius: var(--ref-radius-lg); min-height: 84px; background: var(--sys-surface-1); font-size: var(--type-label-s-size); gap: var(--ref-space-2); }
.more-grid .navlink__label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 440px) { .more-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Notificaciones ---------- */
.notif { display: grid; grid-template-columns: auto 1fr; gap: var(--ref-space-4); padding: var(--ref-space-4); border-radius: var(--ref-radius-md); text-decoration: none; color: inherit; min-height: var(--tap); }
.notif:hover { background: var(--sys-surface-1); }
.notif--unread { background: var(--sys-primary-container); color: var(--sys-on-primary-container); }
.notif__title { font-weight: 600; font-size: var(--type-body-m-size); } .notif__time { font-size: var(--type-label-s-size); opacity: .85; }

/* Pantallas sin shell (acceso): deben ganar a las reglas por clase de ventana */
.app.app--bare, .app.app--bare[data-nav="rail"] { grid-template-columns: minmax(0, 1fr); }
.app.app--bare .sidenav, .app.app--bare .tabbar, .app.app--bare .topbar { display: none !important; }