/* C — Vidro expandido. Brand material approximation for the Capacitor WebView. */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/manrope-600.ttf') format('truetype');
}
:root {
  --hub-glass-canvas: linear-gradient(145deg, #0e1628 0%, #293347 55%, #4a4038 100%);
  --hub-glass-card: rgba(34,45,61,.82);
  --hub-glass-bar: rgba(30,40,58,.22);
  --hub-nav-text: #ced5e2;
  --hub-nav-accent: #efd2a5;
  --hub-glass-solid: #222d3d;
  --hub-glass-text: #f5f6fa;
  --hub-glass-muted: #bfc9d9;
  --hub-glass-line: rgba(255,255,255,.22);
  --hub-glass-selected: rgba(255,255,255,.09);
  --hub-glass-accent: #e6c394;
  --hub-glass-highlight: rgba(255,255,255,.16);
  --hub-create-solid: #344158;
  --hub-create-solid-line: #657188;
}
html[data-theme="light"] {
  --hub-glass-canvas: linear-gradient(145deg, #f4f0e8, #d4dfeb 55%, #e1cfb4);
  --hub-glass-card: rgba(255,255,255,.86);
  --hub-glass-bar: rgba(255,255,255,.34);
  --hub-nav-text: #303a50;
  --hub-nav-accent: #684619;
  --hub-glass-solid: #f9fafc;
  --hub-glass-text: #202648;
  --hub-glass-muted: #536075;
  --hub-glass-line: rgba(32,38,72,.18);
  --hub-glass-selected: rgba(32,38,72,.07);
  --hub-glass-accent: #795424;
  --hub-glass-highlight: rgba(255,255,255,.65);
  --hub-create-solid: #eee7dc;
  --hub-create-solid-line: #b6a68e;
}
html body #s-home { background: var(--hub-glass-canvas) !important; }
html body #s-home .mod-card {
  background: var(--hub-glass-card) !important;
  border: 1px solid var(--hub-glass-line) !important;
  border-radius: 22px;
  box-shadow: inset 0 1px 0 var(--hub-glass-highlight), 0 3px 8px rgba(0,0,0,.08) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  display: flex;
  padding: 15px;
  gap: 10px;
  transition: border-color 140ms ease;
  --hub-icon-color: #e6c394;
}
html body #s-home .mod-card::after, html body #s-home .mod-card::before { content: none; }
html.hub-glass-large-text body #s-home .mod-grid { grid-template-columns: minmax(0,1fr); }
html body #s-home .mod-card:active { transform: none !important; border-color: var(--hub-glass-accent) !important; }
html body #s-home .mod-card-name { color: var(--hub-glass-text) !important; font-size: 1rem; font-weight: 600; }
html body #s-home .mod-card-stat,
html body #s-home .mod-card-cta,
html body #s-home .mod-card-meta,
html body #s-home .mod-card-pill {
  color: var(--hub-glass-muted) !important;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}
html body #s-home .mod-card-name, html body #s-home .mod-card-stat { display: block; overflow: visible; }
html body #s-home .ai-suggestion { animation: none; opacity: 1; }
html body #s-home .mod-card-icon {
  background: var(--hub-glass-selected) !important;
  color: var(--hub-icon-color) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 11px;
  width: 38px; height: 38px;
}
html body #s-home .mod-card-icon svg { width: 23px; height: 23px; stroke: currentColor !important; stroke-width: 1.8; }
html body #s-home .mod-os, html body #s-home .mod-ai { --hub-icon-color: #cdb5f4; }
html body #s-home .mod-inventario { --hub-icon-color: #a4d2b6; }
html body #s-home .mod-approvals { --hub-icon-color: #ffb7b0; }
html[data-theme="light"] body #s-home .mod-card { --hub-icon-color: #795424; }
html[data-theme="light"] body #s-home .mod-os, html[data-theme="light"] body #s-home .mod-ai { --hub-icon-color: #65428d; }
html[data-theme="light"] body #s-home .mod-inventario { --hub-icon-color: #326c48; }
html[data-theme="light"] body #s-home .mod-approvals { --hub-icon-color: #9d3f39; }
/* The outer container owns placement and safe-area measurement; only destinations have glass. */
html body #globalBnav.hub-glass-nav {
  width: calc(100% - 24px); max-width: 420px;
  padding: 0; gap: 8px;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.hub-nav-destinations {
  display: flex; flex: 1; min-width: 0;
  padding: 5px; border-radius: 999px;
  background: var(--hub-glass-bar);
  border: 1px solid var(--hub-glass-line);
  box-shadow: inset 0 1px 1px var(--hub-glass-highlight), 0 4px 12px rgba(0,0,0,.12);
  backdrop-filter: blur(56px) saturate(1.35);
  -webkit-backdrop-filter: blur(56px) saturate(1.35);
}
html body #globalBnav.hub-glass-nav .nb { min-width: 48px; min-height: 58px; color: var(--hub-nav-text); gap: 4px; font-family: 'Manrope', system-ui, sans-serif; }
html body #globalBnav.hub-glass-nav .nb > span { font-family: inherit; font-size: .75rem; font-weight: 600; line-height: 1.25; }
html body #globalBnav.hub-glass-nav .nb svg { width: 25px; height: 25px; }
html body #globalBnav.hub-glass-nav .nb.active { color: var(--hub-nav-accent); background: var(--hub-glass-selected); }
/* Symbols define their own filled/outlined layers, including in cloned catalog icons. */
html body #s-home .mod-card-icon svg[data-hub-symbol],
html body #globalBnav.hub-glass-nav .nb svg[data-hub-symbol],
html body .home-module-open svg[data-hub-symbol],
html body #mobileCreateOverlayM svg[data-hub-symbol],
html body [data-hub-icon] svg[data-hub-symbol] { fill: none; fill-opacity: 1; stroke: none !important; }
html body [data-hub-icon] { display: inline-flex; align-items: center; flex-shrink: 0; }
html body #globalBnav.hub-glass-nav .nb-ctr {
  flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%;
  background: var(--hub-glass-bar) !important;
  backdrop-filter: blur(56px) saturate(1.35);
  -webkit-backdrop-filter: blur(56px) saturate(1.35);
  color: var(--hub-nav-accent) !important;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.12) !important;
}
html body #globalBnav.hub-glass-nav.mobile-nav-large-text { grid-template-columns: minmax(0,1fr); border-radius: 0; }
html body #globalBnav.hub-glass-nav.mobile-nav-large-text .hub-nav-destinations { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-radius: 24px; }
html body #globalBnav.hub-glass-nav.mobile-nav-large-text .nb { grid-column: auto; }
html body #globalBnav.hub-glass-nav.mobile-nav-large-text .nb > span { white-space: normal; overflow-wrap: anywhere; }
html body #globalBnav.hub-glass-nav.mobile-nav-large-text .nb-ctr { width: 58px; height: 58px; min-width: 58px; padding: 0; justify-self: center; }
html body #globalBnav.hub-glass-nav :focus-visible { outline: 3px solid var(--hub-glass-accent); outline-offset: 2px; }
/* User preference also covers WebViews without a system transparency signal. */
.hub-transparency-setting { display: flex; gap: 12px; align-items: center; min-height: 56px; margin-top: 16px; font-size: 15px; cursor: pointer; }
.hub-transparency-setting input { width: 24px; height: 24px; flex: 0 0 24px; accent-color: #795424; }
.hub-transparency-setting small { display: block; font-size: 13px; color: var(--text-sec); line-height: 1.4; margin-top: 4px; }
html[data-hub-transparency="reduced"] body #s-home .mod-card,
html[data-hub-transparency="reduced"] .hub-nav-destinations {
  background: var(--hub-glass-solid) !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none !important;
}
html[data-hub-transparency="reduced"] body #globalBnav.hub-glass-nav .nb-ctr {
  background: var(--hub-create-solid) !important;
  border-color: var(--hub-create-solid-line) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none !important;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html body #s-home .mod-card, .hub-nav-destinations { background: var(--hub-glass-solid) !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none !important; }
  html body #globalBnav.hub-glass-nav .nb-ctr { background: var(--hub-create-solid) !important; border-color: var(--hub-create-solid-line) !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body #s-home .mod-card, .hub-nav-destinations { background: var(--hub-glass-solid) !important; }
  html body #globalBnav.hub-glass-nav .nb-ctr { background: var(--hub-create-solid) !important; border-color: var(--hub-create-solid-line) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #s-home .mod-card, html body #globalBnav.hub-glass-nav .nb { transition: none; }
}