/* ============================================================
   OnAxis ERP · layout.css  v1.0
   Shell de aplicación, sidebar, topbar, encabezados, tabs,
   tarjetas, KPIs y toolbar. Todo color/medida vía tokens.css.
   Única excepción de color: #16161A como texto sobre dorado.
   ============================================================ */

/* ------------------------------------------------------------
   SHELL .app — grid de la aplicación
   ------------------------------------------------------------ */
.app{
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-0);
  transition: grid-template-columns var(--t-med);
}

.app.is-collapsed{
  grid-template-columns: var(--side-w-min) 1fr;
}

/* Contenido principal: scroll propio, ancho acotado */
.app__main{
  grid-area: main;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: var(--content-max);
  justify-self: center;
  overflow-y: auto;
  padding: var(--sp-6);
}

/* ------------------------------------------------------------
   SIDEBAR — tinta constante en ambos temas (identidad OnAxis)
   ------------------------------------------------------------ */
.sidebar{
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--side-bg);
  color: var(--side-ink);
  z-index: var(--z-side);
  transition: width var(--t-med);
}

/* Marca: isotipo 28px + wordmark; alinea su altura con el topbar */
.sidebar__brand{
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding-inline: var(--sp-4);
  border-bottom: 1px solid var(--side-line);
  color: var(--side-ink);
  text-decoration: none;
  white-space: nowrap;
}

.sidebar__logo{
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--gold);
}

.sidebar__wordmark{
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -.015em;
  font-size: var(--fs-emph);
  overflow: hidden;
  transition: opacity var(--t-med), width var(--t-med);
}

/* Nav con scroll interno y scrollbar fina */
.sidebar__nav{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--side-line) transparent;
}
.sidebar__nav::-webkit-scrollbar{ width: 6px; }
.sidebar__nav::-webkit-scrollbar-track{ background: transparent; }
.sidebar__nav::-webkit-scrollbar-thumb{
  background: var(--side-line);
  border-radius: var(--r-pill);
}
.sidebar__nav::-webkit-scrollbar-thumb:hover{ background: var(--side-muted); }

/* Etiqueta de grupo (COMERCIAL, OPERACIÓN, FINANZAS, PLATAFORMA) */
.sidebar__group{
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--side-muted);
  padding-inline: var(--sp-3);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--t-med);
}

/* Ítem de navegación */
.sidebar__item{
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 36px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--side-muted);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.sidebar__item .icon{
  flex: none;
  width: 18px;
  height: 18px;
}

.sidebar__item:hover{
  background: var(--side-bg-2);
  color: var(--side-ink);
}

.sidebar__item:focus-visible{
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

/* Activo: wash dorado + barra izquierda pegada al borde del sidebar */
.sidebar__item.is-active{
  background: var(--gold-tint-2);
  color: var(--gold);
}

.sidebar__item.is-active::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-3));   /* borde del sidebar (padding del nav) */
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--gold);
}

/* Texto del ítem: se colapsa a opacity 0 / width 0 */
.sidebar__label{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--t-med), width var(--t-med);
}

/* Número de módulo (01–16) */
.sidebar__num{
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  opacity: .65;
  transition: opacity var(--t-med), width var(--t-med);
}

/* Contador a la derecha: dorado con texto tinta (excepción documentada) */
.sidebar__badge{
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #16161A;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--t-med), width var(--t-med);
}

/* Pie: avatar + nombre + rol + logout */
.sidebar__footer{
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--side-line);
  white-space: nowrap;
}

.sidebar__user{
  flex: 1 1 auto;
  min-width: 0;
  transition: opacity var(--t-med), width var(--t-med);
}

.sidebar__name{
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--side-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__role{
  font-size: var(--fs-caption);
  color: var(--side-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   ESTADO COLAPSADO — solo iconos centrados; textos a opacity 0
   ------------------------------------------------------------ */
.app.is-collapsed .sidebar__brand{
  justify-content: center;
  padding-inline: 0;
}

.app.is-collapsed .sidebar__item{
  justify-content: center;
  gap: 0;
  padding-inline: 0;
}

.app.is-collapsed .sidebar__wordmark,
.app.is-collapsed .sidebar__label,
.app.is-collapsed .sidebar__num,
.app.is-collapsed .sidebar__badge,
.app.is-collapsed .sidebar__user{
  opacity: 0;
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Grupos → separadores hairline */
.app.is-collapsed .sidebar__group{
  height: 0;
  padding: 0;
  margin: var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--side-line);
  overflow: hidden;
  opacity: 1;              /* la línea permanece; el texto queda oculto */
  color: transparent;
}

/* Pie colapsado: solo avatar centrado */
.app.is-collapsed .sidebar__footer{
  justify-content: center;
  gap: 0;
  padding-inline: 0;
}
.app.is-collapsed .sidebar__footer .btn--icon{
  display: none;
}

/* ------------------------------------------------------------
   TOPBAR
   ------------------------------------------------------------ */
.topbar{
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  height: var(--topbar-h);
  padding-inline: var(--sp-5);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  z-index: var(--z-sticky);
}

.topbar__spacer{ flex: 1 1 auto; }

/* Separador vertical entre iconos y menú de usuario */
.topbar__sep{
  flex: none;
  width: 1px;
  height: 24px;
  background: var(--line);
}

/* Punto de notificación en la esquina del icono (#i-bell) */
.notif-dot{ position: relative; }
.notif-dot::after{
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-1);   /* anillo contra el fondo del topbar */
}

/* ------------------------------------------------------------
   BREADCRUMBS
   ------------------------------------------------------------ */
.breadcrumbs{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--fs-small);
  white-space: nowrap;
}

.breadcrumbs a{
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-fast);

  &:hover{ color: var(--gold-ink); }
  &:focus-visible{
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
  }
}

.breadcrumbs__sep{ color: var(--dim); }

/* Último ítem (página actual) */
.breadcrumbs [aria-current="page"],
.breadcrumbs .is-current{
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   ENCABEZADO DE PÁGINA
   ------------------------------------------------------------ */
.page-header{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.page-header__title{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -.015em;
  line-height: var(--lh-tight);
  font-size: var(--fs-h1);
  color: var(--ink);
}

.page-header__subtitle{
  margin: var(--sp-1) 0 0;
  color: var(--muted);
  font-size: var(--fs-body);
}

.page-header__actions{
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

/* ------------------------------------------------------------
   TABS
   ------------------------------------------------------------ */
.tabs{
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--line);
}

.tab{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: -1px;                 /* el borde activo pisa el hairline */
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.tab:hover{ color: var(--ink); }

.tab:focus-visible{
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.tab.is-active{
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.tab__count{
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding-inline: 7px;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tab.is-active .tab__count{
  background: var(--gold-tint);
  color: var(--gold-ink);
}

/* ------------------------------------------------------------
   TARJETAS .card
   ------------------------------------------------------------ */
.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  min-width: 0;
}

.card__head{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.card__title{
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
}

.card__actions{
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

.card__body{ padding: var(--sp-5); }

.card__foot{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------
   KPI — tarjeta compacta de cifra
   ------------------------------------------------------------ */
.kpi{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

.kpi__label{
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted-2);
}

.kpi__value{
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -.015em;
  line-height: var(--lh-tight);
  font-size: var(--fs-kpi);
  font-variant-numeric: tabular-nums;   /* importes alineados */
  color: var(--ink);
}

.kpi__delta{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kpi__delta .icon{
  width: 14px;
  height: 14px;
  flex: none;
}

.kpi__delta.up{   color: var(--success); }
.kpi__delta.down{ color: var(--danger); }

.kpi__period{
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--muted-2);
  margin-left: var(--sp-1);
}

/* Slot de sparkline 100×28, abajo a la derecha */
.kpi__spark{
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-4);
  width: 100px;
  height: 28px;
  color: var(--series-1);   /* stroke: currentColor en el SVG */
  pointer-events: none;
}

/* ------------------------------------------------------------
   TOOLBAR genérica
   ------------------------------------------------------------ */
.toolbar{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.toolbar__spacer{ flex: 1 1 auto; }