.hg-app-shell {
  display: grid;
  grid-template-columns: var(--hg-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

 .hg-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--hg-z-sidebar);
  height: 100vh;
  overflow: hidden;
  background: var(--hg-color-bg-sidebar);
  color: var(--hg-color-text-sidebar);
  padding: 18px 14px 24px;
  scrollbar-width: none;
}
.hg-sidebar::-webkit-scrollbar { display: none; }
.hg-main-shell {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hg-topbar {
  position: sticky;
  top: 0;
  z-index: var(--hg-z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--hg-topbar-height);
  padding: 0 var(--hg-page-padding-x);
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid rgba(222, 229, 235, 0.95);
}
.hg-topbar__spacer { min-width: 1px; }
.hg-page {
    margin-inline-start: 20px;
    margin-inline-end: 20px;
  flex: 1;
  padding: var(--hg-page-padding-y) var(--hg-page-padding-x) 36px;
}
.hg-page__inner {
  width: min(100%, var(--hg-page-max-width));
  margin-inline: auto;
  display: grid;
  gap: 32px;
}
.hg-page-title-row {
    margin-top: 30px;
    margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hg-grid--top-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hg-grid--period-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* .hg-grid--period-details { grid-template-columns: minmax(0, 2fr) minmax(480px, 1fr); } */
.hg-grid--period-details {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.hg-audience-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(0, 0.95fr);
  gap: var(--hg-grid-gap);
  align-items: start;
}

.hg-audience-layout__main {
  display: grid;
  gap: var(--hg-grid-gap);
  min-width: 0;
}

.hg-audience-layout__side {
  min-width: 0;
}

.hg-grid--audience-top {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hg-grid--audience-bottom { grid-template-columns: 1fr; }
.hg-grid--chart-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hg-grid--donut-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hg-grid--mini-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hg-grid-col-span-2 { grid-column: span 2; }

#localidadCard { display: block; }



.hg-user-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px 2px 5px;
  border-radius: var(--hg-radius-pill);
  border: 1px solid var(--hg-color-control-neutral-border);
  background: var(--hg-color-bg-surface);
  color: var(--hg-color-text-strong);
}
.hg-user-chip__avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hg-color-avatar-bg);
  border: 1px solid var(--hg-color-avatar-border);
  font-size: 14px;
  font-weight: var(--hg-font-weight-bold);
  color: var(--hg-color-brand-600);
}
@media (max-width: 1800px) {
    :root {
        --hg-sidebar-width: 264px;
        --hg-page-max-width: 1560px;
    }
}
@media (max-width: 1440px) {
    .hg-grid--top-kpis,
    .hg-grid--mini-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hg-grid--period-summary,
    .hg-grid--donut-trio,
    .hg-grid--audience-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hg-grid--period-details,
    .hg-grid--chart-duo,
    .hg-grid--audience-bottom { grid-template-columns: 1fr; }

    .hg-audience-layout {
        grid-template-columns: 1fr;
    }

    .hg-grid-col-span-2 { grid-column: auto; }
}
@media (max-width: 1120px) {
    .hg-app-shell { grid-template-columns: 1fr; }
    .hg-sidebar { position: relative; height: auto; }
    .hg-grid--top-kpis,
    .hg-grid--period-summary,
    .hg-grid--audience-top,
    .hg-grid--donut-trio,
    .hg-grid--mini-kpis { grid-template-columns: 1fr; }
    .hg-page,
    .hg-topbar { padding-inline: 16px; }
}

/*--------- Login & Auth ---------*/

.hg-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.hg-auth-card {
    width: min(100%, 476px);
    display: grid;
    gap: 18px;
    padding: 22px 22px 20px;
    background: var(--hg-color-bg-surface);
    border: 1px solid var(--hg-color-card-border);
    border-radius: 18px;
    box-shadow: var(--hg-shadow-card);
}

.hg-auth-card__logo-wrap {
    display: flex;
    justify-content: center;
}

.hg-auth-card__logo {
    width: 200px;
    height: auto;
}

.hg-auth-form {
    display: grid;
    gap: 14px;
}

.hg-auth-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 640px) {
    .hg-auth {
        padding: 16px;
    }

    .hg-auth-card {
        width: 100%;
        padding: 20px 18px 18px;
        border-radius: 16px;
    }
}