/* Variables específicas de nx.css (las principales están en nx-tokens.css) */
:root{
  --nx-speed: 160ms;
}

/* Grids obligatorios (sin JS de layout) */
#grid-nexo,
#grid-admin,
#grid-tools{
  display: grid;
  align-items: stretch;
  gap: var(--nx-gap);
}

.nx-grid{
  display:grid;
  justify-content:start;
  gap:var(--nx-gap);
  width:100%;
  max-width:none;            /* sin topes que recorten */
  margin:0 auto;
}
.nx-grid .nx-card{
  width:auto; max-width:none;
  margin:0;                  /* gap del grid, no márgenes */
  box-sizing:border-box;
}

/* TRACKS EN DESKTOP (≥1201px) */
@media (min-width:1201px){
  /* 3 columnas reales */
  #grid-nexo,
  #grid-admin,
  #grid-tools{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:var(--nx-gap);
  }

  /* Hueco limpio para filas de 2 en admin/tools: pseudo-item ocupa col3 */
  #grid-admin::after,
  #grid-tools::after{
    content:"";
  }
}

/* BREAKPOINTS DEL PROYECTO */
@media (max-width:1200px){
  #grid-nexo,
  #grid-admin,
  #grid-tools{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width:900px){
  #grid-nexo,
  #grid-admin,
  #grid-tools{ grid-template-columns: 1fr; }
}

/* Cards estables (sin height fijo ni scale) */
.nx-card{
  position: relative;              /* evita absolute inesperado */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 160px;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  background: var(--nx-card-bg);
  transition: box-shadow var(--nx-speed) ease,
              filter var(--nx-speed) ease,
              outline-offset var(--nx-speed) ease;
  transform: none !important;      /* neutraliza scale previos */
  box-sizing: border-box;
}
.nx-card:hover{
  box-shadow: 0 -4px 12px var(--nx-glow) inset;
  filter: brightness(1.02);
}
.nx-card:focus-visible{
  outline: 2px solid color-mix(in srgb, currentcolor 40%, transparent);
  outline-offset: 2px;
}

/* === Desktop hard-lock de columnas (≥1201px) === */
@media (min-width:1201px){
  body #dashboard-root #grid-nexo{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: var(--nx-gap);
  }

  /* Admin/Tools: 3 tracks, col3 vacía */
  body #dashboard-root #grid-admin,
  body #dashboard-root #grid-tools{
    display:grid;
    justify-content:start;
    gap: var(--nx-gap);
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
  body #dashboard-root #grid-admin::after,
  body #dashboard-root #grid-tools::after{
    content:"";
  }
  
  /* Neutralizar utilitarios/clases que fuercen 2 columnas */
  #grid-nexo.nx-cols-2,
  #grid-admin.nx-cols-2,
  #grid-tools.nx-cols-2{
    grid-template-columns: inherit !important;
  }
}

/* Breakpoints proyecto (mantener) */
@media (max-width:1200px){
  #grid-nexo{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #grid-admin, #grid-tools{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width:900px){
  #grid-nexo, #grid-admin, #grid-tools{ grid-template-columns: 1fr !important; }
}

/* Ítems: sin márgenes/anchos que rompan tracks */
.nx-grid .nx-card{ width:auto; max-width:none; margin:0; box-sizing:border-box; }

/* Nexo: packing denso y sin spans accidentales */
#grid-nexo{
  display: grid;
  place-content: start start;
  gap: var(--nx-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;   /* rellena huecos si existen */
}

/* Asegura que cada card ocupe 1 celda y no expanda columnas/filas */
#grid-nexo .nx-card{
  width: auto; max-width: none;
  margin: 0;                   /* gap maneja el espacio */
  grid-column: auto !important;
  grid-row: auto !important;
  grid-area: auto !important;
  box-sizing: border-box;
}